/* kartify-help.css — Paket 282
   sayfalar/yardim.tpl icindeki KOSULSUZ ve STATIK gomulu stil blogu
   (kaynak satir 27-369, 9534 karakter) buraya alindi.
   Tek bir kural silinmedi veya degistirilmedi.
   Bagalanti, kaldirilan blogun TAM yerinde duruyor. */

    /* --- Sayfa genişliği: Paket 209'daki ölçülerin aynısı --- */
    @media (min-width: 1200px) and (max-width: 1920px) {
        .breadcrumb-section .custom-container,
        .hp-hero .custom-container,
        .hp-main .custom-container { padding-inline: 10px !important; }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .breadcrumb-section .custom-container,
        .hp-hero .custom-container,
        .hp-main .custom-container { padding-inline: 5px !important; }
    }

    @media (max-width: 991.98px) {
        .breadcrumb-section .custom-container,
        .hp-hero .custom-container,
        .hp-main .custom-container { padding-inline: 2px !important; }
    }

    /* --- Arama şeridi --- */
    .hp-hero{
        padding:30px 0 4px;
        text-align:center;
    }

    /* Aciklama metni panelin zengin metin duzenleyicisinden geliyor ve
       genellikle KENDI <p> etiketiyle geliyor. Bu yuzden kapsayici
       <div> - eskiden <p> idi ve <p> icine <p> konamadigi icin tarayici
       disaridakini hemen kapatiyor, panelden gelen metin kapsayicinin
       DISINDA kardes olarak kaliyordu. Sonuc: hicbir kural tutmuyor,
       genislik sinirlanmiyor ve arama kutusuyla arasinda bosluk
       kalmiyordu (canlida olculdu: aralik 0 px). */
    .hp-hero-desc{
        max-width:600px;
        margin:0 auto 26px;
        color:#5e6278;
        font-size:14.5px;
        line-height:1.7;
    }

    .hp-hero-desc p{margin:0 0 6px}
    .hp-hero-desc p:last-child{margin-bottom:0}

    .hp-hero-search{
        position:relative;
        display:flex;
        align-items:center;
        max-width:620px;
        margin:0 auto;
        background:#fff;
        border:1px solid #e5e7ed;
        border-radius:8px;
        transition:border-color .25s ease,box-shadow .25s ease;
    }

    .hp-hero-search:focus-within{
        border-color:#ff9900;
        box-shadow:0 4px 16px rgba(255,153,0,.14);
    }

    .hp-hero-search > .hp-search-icon{
        position:absolute;
        left:16px;
        top:50%;
        transform:translateY(-50%);
        color:#9aa0b4;
        font-size:14px;
        pointer-events:none;
    }

    .hp-hero-search input{
        flex:1;
        width:100%;
        padding:14px 48px 14px 42px;
        background:transparent;
        border:none;
        outline:none;
        border-radius:8px;
        color:#20242c;
        font-family:inherit;
        font-size:14.5px;
    }

    .hp-hero-search input::placeholder{color:#9aa0b4}

    .hp-search-clear{
        position:absolute;
        right:12px;
        top:50%;
        transform:translateY(-50%);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:28px;
        height:28px;
        border:none;
        border-radius:50%;
        background:#f2f3f8;
        color:#5e6278;
        font-size:11px;
        cursor:pointer;
        transition:all .2s ease;
    }

    .hp-search-clear:hover{background:#ff9900;color:#fff}
    .hp-search-clear[hidden]{display:none}

    /* --- Düzen --- */
    .hp-main{padding:24px 0 0}

    .hp-grid{
        display:grid;
        grid-template-columns:270px 1fr;
        gap:24px;
        align-items:start;
    }

    @media (max-width:991px){
        .hp-grid{grid-template-columns:1fr;gap:16px}
    }

    /* --- Kategori listesi --- */
    .hp-sidebar{
        position:sticky;
        top:90px;
        display:flex;
        flex-direction:column;
        gap:2px;
        padding:8px;
        background:#fff;
        border:1px solid #e5e7ed;
        border-radius:8px;
    }

    @media (max-width:991px){
        .hp-sidebar{
            position:static;
            flex-direction:row;
            flex-wrap:nowrap;
            gap:6px;
            padding:6px;
            overflow-x:auto;
            -webkit-overflow-scrolling:touch;
        }
        .hp-sidebar::-webkit-scrollbar{display:none}
    }

    .hp-cat-link{
        display:flex;
        align-items:center;
        gap:10px;
        width:100%;
        padding:11px 13px;
        background:transparent;
        border:none;
        border-left:3px solid transparent;
        border-radius:6px;
        color:#5e6278;
        font-family:inherit;
        font-size:13.5px;
        font-weight:500;
        text-align:left;
        cursor:pointer;
        transition:all .2s ease;
    }

    .hp-cat-link:hover{background:#f2f3f8;color:#20242c}

    /* Aktif kategori: üye panelindeki menüyle (Paket 191-193) aynı dil. */
    .hp-cat-link.is-active{
        color:#ff9900;
        font-weight:600;
        border-left-color:#ff9900;
        background:linear-gradient(90deg,rgba(255,153,0,.15) 0%,rgba(255,153,0,0) 100%);
    }

    .hp-cat-dot{
        flex-shrink:0;
        width:7px;
        height:7px;
        border-radius:50%;
        background:#d9dce5;
        transition:all .2s ease;
    }

    .hp-cat-link:hover .hp-cat-dot{background:#9aa0b4}
    .hp-cat-link.is-active .hp-cat-dot{background:#ff9900;box-shadow:0 0 0 3px rgba(255,153,0,.18)}

    .hp-cat-label{
        flex:1;
        min-width:0;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .hp-cat-arrow{
        font-size:10px;
        opacity:0;
        transform:translateX(-4px);
        transition:all .2s ease;
    }

    .hp-cat-link.is-active .hp-cat-arrow,
    .hp-cat-link:hover .hp-cat-arrow{opacity:1;transform:translateX(0)}

    @media (max-width:991px){
        .hp-cat-link{flex-shrink:0;width:auto;white-space:nowrap;border-left:none}
        .hp-cat-link.is-active{background:#ff9900;color:#fff}
        .hp-cat-link.is-active .hp-cat-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
        .hp-cat-arrow{display:none}
    }

    /* --- Soru kartları (ölçüler Kartify .custom-accordion) --- */
    .hp-content{min-width:0}

    .hp-cat-pane{display:none;flex-direction:column;gap:10px}
    .hp-cat-pane.is-active{display:flex}

    .hp-q{
        overflow:hidden;
        background:#fff;
        border:1px solid #e5e7ed;
        border-radius:8px;
        transition:border-color .2s ease,box-shadow .2s ease;
    }

    .hp-q:hover:not(.is-open){border-color:#d9dce5}
    .hp-q.is-open{border-color:#ff9900;box-shadow:0 4px 16px rgba(255,153,0,.10)}

    .hp-q-head{
        display:flex;
        align-items:center;
        gap:14px;
        width:100%;
        padding:17px 22px;
        background:transparent;
        border:none;
        outline:none;
        font-family:inherit;
        text-align:left;
        cursor:pointer;
        transition:background .18s ease;
    }

    .hp-q-head:hover{background:#fafbfd}
    .hp-q.is-open .hp-q-head{background:#fff}

    .hp-q-title{
        flex:1;
        color:#20242c;
        font-size:15px;
        font-weight:500;
        line-height:1.5;
        transition:color .2s ease;
    }

    .hp-q.is-open .hp-q-title{font-weight:600}

    .hp-q-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        width:28px;
        height:28px;
        border-radius:50%;
        background:#f2f3f8;
        color:#5e6278;
        font-size:11px;
        transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
    }

    .hp-q.is-open .hp-q-icon{background:#ff9900;color:#fff;transform:rotate(45deg)}

    .hp-q-body{display:none;padding:0 22px}
    .hp-q.is-open .hp-q-body{display:block;padding:0 22px 20px;animation:hpFadeIn .25s ease}

    @keyframes hpFadeIn{
        from{opacity:0;transform:translateY(-4px)}
        to{opacity:1;transform:translateY(0)}
    }

    /* Cevap gövdesi: içerik panelden geliyor, yaygın etiketler biçimlendirildi. */
    .hp-q-content{color:#5e6278;font-size:14.5px;line-height:1.75}
    .hp-q-content p{margin:0 0 10px}
    .hp-q-content p:last-child{margin-bottom:0}
    .hp-q-content a{color:#ff9900;text-decoration:underline}
    .hp-q-content img{max-width:100%;height:auto;margin:8px 0;border-radius:6px}
    .hp-q-content ul,.hp-q-content ol{margin:0 0 10px;padding-left:20px}
    .hp-q-content li{margin-bottom:5px}

    .hp-q-content table{
        width:100%;
        display:block;
        overflow-x:auto;
        border-collapse:collapse;
        margin:0 0 10px;
    }

    .hp-q-content td,.hp-q-content th{padding:8px 10px;border:1px solid #eceef3}

    /* --- Sonuç yok --- */
    .hp-empty{
        display:flex;
        flex-direction:column;
        align-items:center;
        padding:44px 22px;
        background:#fff;
        border:1.5px dashed #e5e7ed;
        border-radius:8px;
        text-align:center;
    }

    .hp-empty[hidden]{display:none}

    .hp-empty-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:54px;
        height:54px;
        margin-bottom:12px;
        border-radius:50%;
        background:#f2f3f8;
        color:#9aa0b4;
        font-size:20px;
    }

    .hp-empty h3{margin:0 0 5px;color:#20242c;font-size:16px;font-weight:600}
    .hp-empty p{margin:0;max-width:340px;color:#5e6278;font-size:14px}

    @media (max-width:600px){
        .hp-hero{padding:18px 0 4px}
        .hp-hero-desc{font-size:13.5px;margin-bottom:14px}
        .hp-hero-search input{padding:12px 44px 12px 40px;font-size:14px}
        .hp-q-head{padding:14px 16px;gap:10px}
        .hp-q-title{font-size:14px}
        .hp-q-body{padding:0 16px}
        .hp-q.is-open .hp-q-body{padding:0 16px 16px}
    }