/* ============================================================
   FIMAK — kullanim-kilavuzlari.css
   Yalnizca kullanim-kilavuzlari.php'de yuklenir; style.css'i tamamlar.
   Sayfa hero'su paylasilan css/page-hero.css dosyasindadir; buradaki
   .kk-hero onun altindaki arama bandidir.

   Bolumler
   1. Ortak kapsayici ve arama bandi
   2. Filtre cubugu (yapiskan)
   3. Kilavuz satiri
   4. Bos durum
   5. Yardim kutusu
   6. Responsive (tum media query'ler burada)

   Olculer akiskan: clamp ile 375px -> 1920px arasi dogrusal buyur.
   Renkler style.css'teki :root degiskenlerinden okunur.
   ============================================================ */


/* ------------------------------------------------------------
   1. Ortak kapsayici ve arama bandi
   ------------------------------------------------------------ */
.kk {
    --kk-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* style.css'teki govde degerlerini notrle */
    letter-spacing: normal;
    line-height: normal;
}

.kk-wrap {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 80px);
}

.kk-hero {
    padding-block: clamp(40px, 5vw, 80px) clamp(36px, 4vw, 64px);
    background-color: var(--surface-alt);
    text-align: center;
}

.kk-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--brand);
}

.kk-hero h2 {
    margin-top: 14px;
    font-size: clamp(30px, 3.4vw, 56px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--text);
}

.kk-hero > .kk-wrap > p {
    max-width: 620px;
    margin: clamp(16px, 1.6vw, 24px) auto 0;
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.6;
    color: var(--text-secondary);
}

.kk-search {
    position: relative;
    display: block;
    max-width: 640px;
    margin: clamp(30px, 3vw, 46px) auto 0;
}

.kk-search > svg {
    position: absolute;
    top: 50%;
    left: 22px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 2;
    transform: translateY(-50%);
    pointer-events: none;
}

.kk-search input {
    width: 100%;
    height: 64px;
    padding: 0 56px;
    /* Saydam kenarlik hep duruyor: odakta renk degisince alan zipllamaz */
    border: 1px solid transparent;
    border-radius: 40px;
    background-color: var(--surface);
    box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.25);
    font-family: inherit;
    font-size: 17px;
    color: var(--text);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.kk-search input::placeholder { color: var(--text-secondary); }

.kk-search input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgb(226 6 19 / 0.1), 0 10px 30px -18px rgb(0 0 0 / 0.25);
}

/* Tarayicinin kendi temizleme carpisi yerine kendi dugmemiz */
.kk-search input::-webkit-search-cancel-button { display: none; }

.kk-clear {
    position: absolute;
    top: 50%;
    right: 16px;
    display: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background-color: var(--surface-alt);
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.kk-clear.is-on { display: block; }

.kk-clear:hover {
    background-color: var(--brand);
    color: #fff;
}

.kk-clear:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* ------------------------------------------------------------
   2. Filtre cubugu
   Yapiskan baslik 44px; cubuk onun altina oturur.
   ------------------------------------------------------------ */
.kk-bar {
    position: sticky;
    top: var(--nav-height, 44px);
    z-index: 20;
    border-bottom: 1px solid var(--border);
    background-color: rgb(255 255 255 / 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.kk-bar .kk-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
}

/* Cipler dar ekranda yatay kayar; cubuk gorunmez */
.kk-chips {
    display: flex;
    gap: 8px;
    padding-block: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}

.kk-chips::-webkit-scrollbar { display: none; }

.kk-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background-color: var(--surface);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.3s var(--kk-ease), background-color 0.3s var(--kk-ease),
        color 0.3s var(--kk-ease);
}

.kk-chip small {
    font-size: 12px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.kk-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.kk-chip.is-active {
    border-color: var(--text);
    background-color: var(--text);
    color: #fff;
}

.kk-chip.is-active small { color: rgb(255 255 255 / 0.6); }

.kk-chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.kk-count {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.kk-count b {
    font-weight: 600;
    color: var(--text);
}


/* ------------------------------------------------------------
   3. Kilavuz satiri
   ------------------------------------------------------------ */
.kk-list {
    display: grid;
    gap: 10px;
    padding-block: clamp(32px, 3.4vw, 56px) clamp(40px, 4vw, 70px);
    list-style: none;
}

.kk-group {
    margin-top: clamp(18px, 2vw, 30px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.kk-group:first-child { margin-top: 0; }

.kk-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    padding: clamp(16px, 1.6vw, 22px) clamp(16px, 2vw, 28px);
    border: 1px solid transparent;
    border-radius: 18px;
    background-color: var(--surface-alt);
    transition: background-color 0.35s ease, border-color 0.35s ease,
        box-shadow 0.45s var(--kk-ease), transform 0.45s var(--kk-ease);
    animation: kk-in 0.5s var(--kk-ease) both;
    animation-delay: var(--d, 0ms);
}

@keyframes kk-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.kk-item:hover {
    border-color: var(--border);
    background-color: var(--surface);
    box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.28);
    transform: translateY(-2px);
}

/* Kagit figuru: ust kosesi kivrik bir belge; satirlar ::before ile */
.kk-doc {
    position: relative;
    display: grid;
    place-items: end center;
    width: 52px;
    height: 64px;
    padding-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 6px 14px 6px 6px;
    background-color: var(--surface);
    transition: transform 0.5s var(--kk-ease);
}

.kk-doc::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 16px;
    left: 10px;
    height: 3px;
    border-radius: 2px;
    background-color: var(--border);
    box-shadow: 0 7px 0 var(--border), 0 14px 0 var(--border);
}

.kk-doc span {
    padding: 2px 6px;
    border-radius: 4px;
    background-color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
}

.kk-item:hover .kk-doc { transform: rotate(-6deg) translateY(-2px); }

.kk-info h3 {
    font-size: clamp(16px, 1.15vw, 19px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text);
}

/* Arama vurgusu */
.kk-info h3 mark {
    padding: 0 2px;
    border-radius: 3px;
    background-color: rgb(226 6 19 / 0.14);
    color: inherit;
}

.kk-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.kk-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* display:inline-flex hidden niteligini eziyor; boyut yokken
   span da ayiricisi da gorunmesin */
.kk-meta span[hidden] { display: none; }

/* Aralara nokta: ayri bir oge eklemeden ayirici */
.kk-meta span + span::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: var(--border);
}

.kk-langs {
    display: flex;
    gap: 4px;
    min-width: 84px;
}

.kk-lang {
    height: 30px;
    min-width: 38px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.kk-lang:hover {
    border-color: var(--text-secondary);
    color: var(--text);
}

.kk-lang.is-active {
    border-color: var(--text);
    background-color: var(--text);
    color: #fff;
}

.kk-lang:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.kk-actions {
    display: flex;
    gap: 8px;
}

.kk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-width: 44px;
    padding: 0 16px;
    border: 1px solid var(--border);
    border-radius: 40px;
    background-color: var(--surface);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    /* style.css'te a { color: var(--brand-dark); } var */
    color: var(--text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.kk-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kk-btn:hover { border-color: var(--text); }

.kk-btn--primary {
    border-color: var(--brand);
    background-color: var(--brand);
    color: #fff;
}

.kk-btn--primary:hover {
    border-color: var(--brand-dark);
    background-color: var(--brand-dark);
}

.kk-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Dosya henuz yuklenmemisse dugme yerine bu not cikar */
.kk-soon {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border: 1px dashed var(--border);
    border-radius: 40px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--text-secondary);
}


/* ------------------------------------------------------------
   4. Bos durum
   ------------------------------------------------------------ */
.kk-empty {
    display: none;
    padding: clamp(40px, 5vw, 80px) 20px;
    border-radius: 18px;
    background-color: var(--surface-alt);
    text-align: center;
}

.kk-empty.is-on { display: block; }

.kk-empty svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--border);
    stroke-width: 1.5;
}

.kk-empty h3 {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
}

.kk-empty p {
    margin-top: 8px;
    font-size: 15px;
    color: var(--text-secondary);
}


/* ------------------------------------------------------------
   5. Yardim kutusu
   ------------------------------------------------------------ */
.kk-help { padding-bottom: clamp(70px, 7vw, 120px); }

.kk-help__box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: clamp(28px, 3vw, 48px);
    border-radius: 24px;
    background-color: var(--text);
    color: #fff;
}

.kk-help h2 {
    font-size: clamp(22px, 2vw, 32px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.kk-help p {
    max-width: 560px;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.65);
}

.kk-help__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kk-help .kk-btn {
    height: 52px;
    padding: 0 26px;
    border-color: rgb(255 255 255 / 0.35);
    background: transparent;
    color: #fff;
}

.kk-help .kk-btn:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--text);
}

.kk-help .kk-btn--primary {
    border-color: var(--brand);
    background-color: var(--brand);
}

.kk-help .kk-btn--primary:hover {
    border-color: #fff;
    background-color: #fff;
    color: var(--brand);
}

.kk-help .kk-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}


/* ------------------------------------------------------------
   6. Responsive
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .kk-item {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 14px;
    }

    .kk-langs { grid-column: 2; }

    .kk-actions { grid-column: 1 / -1; }
    .kk-actions .kk-btn { flex: 1; }
    .kk-actions .kk-soon { flex: 1; justify-content: center; }

    .kk-help__box { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .kk-bar .kk-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 10px;
    }

    .kk-count { font-size: 13px; }

    .kk-doc {
        width: 44px;
        height: 54px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kk-search input,
    .kk-clear,
    .kk-chip,
    .kk-chip small,
    .kk-item,
    .kk-doc,
    .kk-lang,
    .kk-btn { transition: none; }

    .kk-item {
        animation: none;
        opacity: 1;
    }

    .kk-item:hover { transform: none; }
    .kk-item:hover .kk-doc { transform: none; }
}