/* ============================================================================
   İVME TEKNOLOJİ — TASARIM SİSTEMİ
   Sıcak teknik editoryal: krem kağıt, saç teli çizgiler, mürekkep bantlar,
   tek turuncu vurgu. Chevron sitenin tekrar eden jesti; her şey ileri iter.
   ========================================================================= */

/* --- 1. Simgeler ---------------------------------------------------------- */
:root {
    /* Marka.
       --turuncu marka turuncusudur; beyaz üzerinde 3.74:1 verdiği için yalnızca
       METİN OLMAYAN öğelerde ve büyük başlık vurgularında kullanılır (WCAG 3:1).
       Küçük metin ve dolu butonlar için AA eşiğini geçen koyu türevleri kullanılır. */
    --turuncu: #E4551F;         /* rozet, çizgi, ikon, büyük başlık vurgusu */
    --turuncu-metin: #B93F10;   /* küçük turuncu metin: krem üzerinde 5.27:1 */
    --turuncu-buton: #C24413;   /* beyaz yazılı dolu buton: 5.08:1 */
    --turuncu-buton-koyu: #A5380F; /* buton vurgu durumu: 6.62:1 */
    --turuncu-acik: #F06A32;    /* mürekkep zeminde: 5.09:1 */
    --turuncu-koyu: #C24413;
    --murekkep: #2B211D;
    --yazi: #362A24;
    --yazi-yumusak: #5C4E46;
    --gri: #6B5E56;             /* krem üzerinde 5.92:1, beyaz üzerinde 6.25:1 */
    --kagit: #FDF8F4;
    --krem: #FCF9F6;
    --beyaz: #FFFFFF;

    /* Çizgiler — bu sistemde gölge değil, çizgi yapı kurar */
    --cizgi: #EDE3DA;
    --cizgi-koyu: #DCCFC3;
    --cizgi-acik: #F4ECE4;

    /* Mürekkep bant içi */
    --ink-zemin: #2B211D;
    --ink-zemin-2: #241B18;
    --ink-yazi: #FCF9F6;
    --ink-gri: #B8A99F;
    --ink-cizgi: rgba(252, 249, 246, .14);

    /* Ölçü */
    --en: 1200px;
    --en-dar: 760px;
    --kenar: 24px;
    --radius: 10px;
    --radius-k: 6px;

    /* Hareket */
    --gecis: 260ms cubic-bezier(.2, .8, .2, 1);
    --gecis-hizli: 160ms cubic-bezier(.2, .8, .2, 1);

    /* Yazı tipleri */
    --font-govde: Sora, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- 2. Temel ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--kagit);
    color: var(--yazi);
    font-family: var(--font-govde);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Kağıt dokusu: çok hafif sıcak ışıma + hairline ızgara */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 40rem at 78% -10%, rgba(228, 85, 31, .07), transparent 62%),
        radial-gradient(48rem 34rem at 4% 8%, rgba(228, 85, 31, .04), transparent 58%);
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
    color: var(--turuncu-metin);
    text-decoration: none;
    transition: color var(--gecis-hizli);
}

a:hover { color: var(--turuncu-buton-koyu); }

/* Akış metni içindeki bağlantılar yalnızca renkle ayrılmasın (WCAG 1.4.1).
   Yalnızca gerçek metin blokları hedeflenir; menü, kart ve alt bilgi listelerindeki
   blok bağlantılar zaten kendi bağlamlarında ayırt edilir. */
p a, .yazi-akisi a, .sss-cevap a, .liste li a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

p a:hover, .yazi-akisi a:hover, .sss-cevap a:hover, .liste li a:hover {
    text-decoration-thickness: 2px;
}

/* Buton görünümündeki bağlantılar metin bağlantısı değildir. */
a.buton, a.buton:hover { text-decoration: none; }

.alt-liste a:hover, .alt-iletisim a:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

:focus-visible {
    outline: 2px solid var(--turuncu);
    outline-offset: 3px;
    border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.12;
    color: var(--yazi);
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }

hr {
    border: 0;
    border-top: 1px solid var(--cizgi);
    margin: 0;
}

/* --- 2b. İkonlar ---------------------------------------------------------
   Font Awesome yerine yerel SVG sprite. Semboller Lucide (ISC) setinden
   üretildi; sprite _Layout içinde satır içi gömülür.
   ---------------------------------------------------------------------- */
.ikon {
    width: 1em;
    height: 1em;
    flex: none;
    display: inline-block;
    vertical-align: -.14em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

/* Rozet içindeki ikonlar: Lucide çizgisel olduğu için 1em'de zayıf kalıyor,
   dolu Font Awesome gliflerinin optik ağırlığını yakalamak için büyütülür. */
.kart-ikon .ikon,
.iletisim-ikon .ikon { width: 1.35em; height: 1.35em; }

.ikon-doner { animation: ikon-don 900ms linear infinite; }

@keyframes ikon-don { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
    .ikon-doner { animation-duration: 2.4s; }
}

/* --- 3. Yerleşim ---------------------------------------------------------- */
.kap {
    width: 100%;
    max-width: var(--en);
    margin-inline: auto;
    padding-inline: var(--kenar);
}

.kap-dar {
    width: 100%;
    max-width: var(--en-dar);
    margin-inline: auto;
    padding-inline: var(--kenar);
}

.bolum { padding-block: clamp(64px, 9vw, 118px); }
.bolum-sik { padding-block: clamp(48px, 6vw, 76px); }

/* Sütun sayıları bilinçli olarak sabit: auto-fit, içerik sayısına göre
   öngörülemeyen satır sonları üretiyor ve son satırda yetim kart bırakıyordu. */
.izgara { display: grid; gap: clamp(18px, 2vw, 26px); }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.yigin { display: flex; flex-direction: column; }
.yigin-8 { gap: 8px; }
.yigin-12 { gap: 12px; }
.yigin-16 { gap: 16px; }
.yigin-24 { gap: 24px; }
.yigin-32 { gap: 32px; }
.yigin-48 { gap: clamp(32px, 4vw, 48px); }

.satir { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.atlama-baglantisi {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 12px 20px;
    background: var(--murekkep);
    color: var(--krem);
    font-size: .875rem;
}

.atlama-baglantisi:focus {
    left: 12px;
    top: 12px;
    color: var(--krem);
}

/* --- 4. Tipografi --------------------------------------------------------- */
.devasa {
    font-size: clamp(2.5rem, 6.2vw, 4.6rem);
    font-weight: 300;
    letter-spacing: -.042em;
    line-height: 1.03;
}

.baslik-1 {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 300;
    letter-spacing: -.038em;
    line-height: 1.08;
}

.baslik-2 {
    font-size: clamp(1.55rem, 2.9vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -.032em;
    line-height: 1.14;
}

.baslik-3 {
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.3;
}

/* Turuncu vurgu kelimesi — italik değil, renkli */
.vurgu { font-style: normal; color: var(--turuncu); }

.giris {
    font-size: clamp(1.02rem, 1.35vw, 1.16rem);
    line-height: 1.68;
    color: var(--yazi-yumusak);
    max-width: 58ch;
}

.metin { color: var(--gri); line-height: 1.75; }
.metin-koyu { color: var(--yazi-yumusak); }
.kucuk { font-size: .875rem; }
.mini { font-size: .8125rem; }

/* Monospace mikro etiket — sistemin imzası */
.etiket {
    font-family: var(--font-mono);
    font-size: .688rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gri);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.etiket::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--turuncu);
    flex: none;
}

.etiket-sade::before { display: none; }

.numara {
    font-family: var(--font-mono);
    font-size: .688rem;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--turuncu-metin);
    line-height: 1;
}

/* --- 5. Bölüm başlığı ----------------------------------------------------- */
.bolum-basi {
    display: grid;
    gap: 18px;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.bolum-basi.orta {
    justify-items: center;
    text-align: center;
}

.bolum-basi.orta .giris { margin-inline: auto; }

.bolum-basi-ust {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.bolum-basi-ust .cizgi-dolgu {
    flex: 1;
    height: 1px;
    background: var(--cizgi);
    min-width: 20px;
}

.bolum-basi.orta .bolum-basi-ust { justify-content: center; }

/* --- 6. Butonlar ---------------------------------------------------------- */
.buton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-govde);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    cursor: pointer;
    transition: background var(--gecis-hizli), color var(--gecis-hizli),
                border-color var(--gecis-hizli), transform var(--gecis-hizli);
    white-space: nowrap;
}

.buton i, .buton svg { flex: none; font-size: .875em; }

.buton-ana {
    background: var(--turuncu-buton);
    color: var(--beyaz);
}

.buton-ana:hover {
    background: var(--turuncu-buton-koyu);
    color: var(--beyaz);
    transform: translateY(-1px);
}

.buton-cizgi {
    background: transparent;
    border-color: var(--cizgi-koyu);
    color: var(--yazi);
}

.buton-cizgi:hover {
    border-color: var(--murekkep);
    background: var(--murekkep);
    color: var(--krem);
    transform: translateY(-1px);
}

.buton-ink {
    background: var(--turuncu-acik);
    color: var(--murekkep);
    font-weight: 600;
}

.buton-ink:hover {
    background: var(--krem);
    color: var(--murekkep);
    transform: translateY(-1px);
}

.buton-ink-cizgi {
    background: transparent;
    border-color: var(--ink-cizgi);
    color: var(--ink-yazi);
}

.buton-ink-cizgi:hover {
    border-color: var(--krem);
    background: rgba(252, 249, 246, .06);
    color: var(--ink-yazi);
    transform: translateY(-1px);
}

/* Metin bağlantısı — ok ileri iter */
.ok-bag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--turuncu-metin);
    text-decoration: none;
    line-height: 1;
}

.ok-bag::after {
    content: "";
    width: 15px;
    height: 9px;
    background: currentColor;
    -webkit-mask: var(--ok-mask) center / contain no-repeat;
            mask: var(--ok-mask) center / contain no-repeat;
    transition: transform var(--gecis);
}

:root {
    --ok-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M15 2l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ok-bag:hover::after { transform: translateX(5px); }

/* --- 7. Kartlar ----------------------------------------------------------- */
.kart {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(22px, 2.4vw, 30px);
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--gecis), transform var(--gecis);
}

/* Üst kenarda turuncu çizgi, hover'da soldan sağa çizilir */
.kart::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--turuncu);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--gecis);
}

.kart:hover {
    border-color: var(--cizgi-koyu);
    transform: translateY(-3px);
}

.kart:hover::before { transform: scaleX(1); }

.kart-ikon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(228, 85, 31, .09);
    color: var(--turuncu);
    font-size: 1.05rem;
    flex: none;
    transition: background var(--gecis), color var(--gecis);
}

.kart:hover .kart-ikon {
    background: var(--turuncu);
    color: var(--beyaz);
}

.kart-ust {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

/* Bağlantılı kart — tüm yüzey tıklanabilir */
a.kart { color: inherit; }
a.kart:hover { color: inherit; }
a.kart .baslik-3 { transition: color var(--gecis-hizli); }
a.kart:hover .baslik-3 { color: var(--turuncu-metin); }

.kart-alt {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--turuncu-metin);
}

.kart-alt::after {
    content: "";
    width: 13px;
    height: 8px;
    background: currentColor;
    -webkit-mask: var(--ok-mask) center / contain no-repeat;
            mask: var(--ok-mask) center / contain no-repeat;
    transition: transform var(--gecis);
}

a.kart:hover .kart-alt::after { transform: translateX(5px); }

/* Sade kart — zemin yok, sadece çizgi */
.kart-sade {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--cizgi);
    border-radius: 0;
    padding: 26px 0 4px;
}

.kart-sade::before { top: -1px; }
.kart-sade:hover { transform: none; }

/* --- 8. Madde listeleri --------------------------------------------------- */
.liste { list-style: none; display: grid; gap: 11px; }

.liste li {
    position: relative;
    padding-left: 25px;
    font-size: .9375rem;
    line-height: 1.62;
    color: var(--yazi-yumusak);
}

/* Chevron madde işareti */
.liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .52em;
    width: 11px;
    height: 11px;
    background: var(--turuncu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
}

:root {
    --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ink .liste li { color: var(--ink-gri); }
.ink .liste li::before { background: var(--turuncu-acik); }

/* --- 9. Künye tablosu (teknik künye) ------------------------------------- */
.kunye {
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    background: var(--beyaz);
    overflow: hidden;
}

.kunye-baslik {
    padding: 14px 20px;
    border-bottom: 1px solid var(--cizgi);
    background: var(--cizgi-acik);
}

/* Başlık <dl> dışında durur: <dl> yalnızca dt/dd taşıyan div'ler içerebilir. */
.kunye-govde { margin: 0; }

.kunye-satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--cizgi-acik);
    font-family: var(--font-mono);
    font-size: .75rem;
    line-height: 1.5;
}

.kunye-satir:last-child { border-bottom: 0; }

.kunye-satir dt {
    color: var(--gri);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .688rem;
    flex: none;
}

.kunye-satir dd {
    margin: 0;
    color: var(--yazi);
    text-align: right;
    font-weight: 500;
}

/* --- 10. Ölçüm (metrik) --------------------------------------------------- */
.olcumler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    overflow: hidden;
}

.olcum {
    background: var(--kagit);
    padding: clamp(22px, 2.6vw, 30px);
    display: grid;
    gap: 7px;
}

.olcum-deger {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--turuncu);
}

.olcum-etiket {
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gri);
    line-height: 1.5;
}

.ink .olcumler { background: var(--ink-cizgi); border-color: var(--ink-cizgi); }
.ink .olcum { background: var(--ink-zemin); }
.ink .olcum-deger { color: var(--turuncu-acik); }
.ink .olcum-etiket { color: var(--ink-gri); }

/* --- 11. Adım akışı ------------------------------------------------------- */
.adimlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 0;
}

.adim {
    position: relative;
    padding: 30px 24px 30px 0;
    border-top: 2px solid var(--cizgi);
    display: grid;
    gap: 10px;
    align-content: start;
}

.adim:not(:last-child) { padding-right: clamp(24px, 3vw, 40px); }

/* Akışı gösteren turuncu uç */
.adim::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--turuncu);
}

.adim-no {
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--turuncu);
    line-height: 1;
}

.ink .adim { border-top-color: var(--ink-cizgi); }
.ink .adim-no { color: var(--turuncu-acik); }
.ink .adim::before { background: var(--turuncu-acik); }

/* --- 12. Mürekkep bant ---------------------------------------------------- */
.ink {
    background: var(--ink-zemin);
    color: var(--ink-yazi);
    position: relative;
    overflow: hidden;
}

.ink h1, .ink h2, .ink h3, .ink h4 { color: var(--ink-yazi); }
.ink .metin, .ink .giris { color: var(--ink-gri); }
.ink .etiket { color: var(--ink-gri); }
.ink .etiket::before { background: var(--turuncu-acik); }
.ink .numara { color: var(--turuncu-acik); }
.ink .vurgu { color: var(--turuncu-acik); }
.ink .bolum-basi-ust .cizgi-dolgu { background: var(--ink-cizgi); }
/* Butonlar hariç: aksi halde .ink a, .buton-ink'in kendi rengini eziyor
   ve yazı zeminle aynı turuncuya dönerek görünmez oluyordu. */
.ink a:not(.buton) { color: var(--turuncu-acik); }
.ink .ok-bag { color: var(--turuncu-acik); }
.ink .buton-ink { color: var(--murekkep); }
.ink .buton-ink:hover { color: var(--murekkep); }
.ink .buton-ink-cizgi { color: var(--ink-yazi); }

/* Mürekkep bantta hız çizgileri — chevron ritminin arka plan yankısı */
.ink-cizgiler {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: repeating-linear-gradient(
        108deg,
        transparent 0 62px,
        rgba(252, 249, 246, .035) 62px 63px
    );
}

/* --- 13. Sık sorulanlar --------------------------------------------------- */
.sss { border-top: 1px solid var(--cizgi); }

.sss details {
    border-bottom: 1px solid var(--cizgi);
}

.sss summary {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: -.015em;
    line-height: 1.45;
    color: var(--yazi);
    transition: color var(--gecis-hizli);
}

.sss summary::-webkit-details-marker { display: none; }
.sss summary:hover { color: var(--turuncu-metin); }

.sss summary::after {
    content: "";
    margin-left: auto;
    margin-top: .3em;
    flex: none;
    width: 12px;
    height: 12px;
    background: var(--turuncu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
    transform: rotate(90deg);
    transition: transform var(--gecis);
}

.sss details[open] summary::after { transform: rotate(-90deg); }

.sss-cevap {
    padding: 0 46px 24px 0;
    color: var(--gri);
    font-size: .9375rem;
    line-height: 1.75;
    max-width: 68ch;
}

/* --- 14. Başlık / navigasyon ---------------------------------------------- */
.ust {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(253, 248, 244, .88);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
    max-width: var(--en);
    margin-inline: auto;
    padding: 14px var(--kenar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.ana-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.menu-bag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 7px;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--yazi);
    letter-spacing: -.01em;
    transition: background var(--gecis-hizli), color var(--gecis-hizli);
    white-space: nowrap;
}

.menu-bag:hover, .menu-bag[aria-expanded="true"] {
    background: rgba(228, 85, 31, .08);
    color: var(--turuncu-metin);
}

.menu-bag.aktif { color: var(--turuncu-metin); font-weight: 500; }

.menu-ok {
    width: 9px;
    height: 9px;
    background: currentColor;
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
    transform: rotate(90deg);
    transition: transform var(--gecis-hizli);
    opacity: .65;
}

.menu-bag[aria-expanded="true"] .menu-ok { transform: rotate(-90deg); }

/* Açılır mega menü */
.acilir {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    top: 100%;
    width: min(940px, calc(100vw - 32px));
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: 0 24px 60px -28px rgba(43, 33, 29, .3);
    padding: 26px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}

.menu-ogesi { position: relative; }

.menu-ogesi.acik .acilir {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.acilir-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 4px 22px;
}

.acilir-sutun { display: grid; gap: 3px; align-content: start; }

.acilir-baslik {
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gri);
    padding: 8px 10px 6px;
    border-bottom: 1px solid var(--cizgi-acik);
    margin-bottom: 5px;
}

.acilir-bag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: .875rem;
    color: var(--yazi);
    line-height: 1.35;
    transition: background var(--gecis-hizli), color var(--gecis-hizli);
}

.acilir-bag i {
    width: 15px;
    font-size: .8125rem;
    color: var(--turuncu-metin);
    flex: none;
    text-align: center;
    opacity: .75;
    transition: opacity var(--gecis-hizli);
}

.acilir-bag:hover {
    background: var(--cizgi-acik);
    color: var(--turuncu-metin);
}

.acilir-bag:hover i { opacity: 1; }

.acilir-alt {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cizgi);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Mobil menü düğmesi */
.menu-dugmesi {
    display: none;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 9px;
    cursor: pointer;
    place-items: center;
    color: var(--yazi);
}

.menu-dugmesi span {
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    position: relative;
    transition: background var(--gecis-hizli);
}

.menu-dugmesi span::before,
.menu-dugmesi span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--gecis);
}

.menu-dugmesi span::before { top: -5.5px; }
.menu-dugmesi span::after { top: 5.5px; }

.menu-dugmesi[aria-expanded="true"] span { background: transparent; }
.menu-dugmesi[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.menu-dugmesi[aria-expanded="true"] span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* --- 15. Kimlik (logo kilidi) --------------------------------------------- */
.iv-kilit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: none;
}

.iv-metin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transform: translateY(2px);
}

.iv-ad {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 25px;
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--yazi);
}

.iv-nokta { width: 6px; height: 6px; background: var(--turuncu); flex: none; }

.iv-alt { display: flex; align-items: center; gap: 8px; width: 100%; }

.iv-cizgi { flex: 1; min-width: 18px; height: 2px; background: var(--turuncu); }

.iv-etiket {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--gri);
    white-space: nowrap;
}

/* Logo animasyonu — kit ile birebir */
.iv-logo { flex: none; }

.iv-logo .draw {
    fill: none;
    stroke: var(--turuncu);
    stroke-width: 5;
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: iv-draw .9s cubic-bezier(.4, 0, .2, 1) forwards, iv-hide .35s .9s forwards;
}

.iv-logo .ring { transform-origin: 32px 32px; animation: iv-fill .5s .75s ease-out both; }
.iv-logo .bar  { animation: iv-show .4s 1s ease-out both, iv-hold 2.8s 1.5s ease-in-out infinite; }
.iv-logo .chev { animation: iv-show .4s 1s ease-out both, iv-push 2.8s 1.5s ease-in-out infinite; }

@keyframes iv-draw { to { stroke-dashoffset: 0 } }
@keyframes iv-hide { to { opacity: 0 } }
@keyframes iv-fill { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes iv-show { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: translateX(0) } }
@keyframes iv-push { 0%, 55%, 100% { transform: translateX(0) } 68% { transform: translateX(4px) } 82% { transform: translateX(-1px) } }
@keyframes iv-hold { 0%, 55%, 100% { transform: translateX(0) } 68% { transform: translateX(-1.5px) } }

.iv-ad-anim { animation: iv-word .5s 1.15s cubic-bezier(.2, .8, .2, 1) both; }
.iv-cizgi-anim { transform-origin: left center; animation: iv-line .45s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.iv-etiket-anim { animation: iv-word .5s 1.4s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes iv-word { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: translateX(0) } }
@keyframes iv-line { from { transform: scaleX(0) } to { transform: scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
    .iv-logo .ring, .iv-logo .bar, .iv-logo .chev { animation: none; opacity: 1; }
    .iv-logo .draw { display: none; }
    .iv-ad-anim, .iv-cizgi-anim, .iv-etiket-anim { animation: none; opacity: 1; transform: none; }
}

/* Mürekkep zeminde kimlik */
.ink .iv-ad, .alt-bilgi .iv-ad { color: var(--krem); }
.ink .iv-etiket, .alt-bilgi .iv-etiket { color: var(--ink-gri); }
.ink .iv-cizgi, .ink .iv-nokta,
.alt-bilgi .iv-cizgi, .alt-bilgi .iv-nokta { background: var(--turuncu-acik); }

/* --- 16. Kahraman (hero) -------------------------------------------------- */
.kahraman {
    position: relative;
    padding-block: clamp(58px, 8vw, 104px) clamp(56px, 7vw, 92px);
    overflow: hidden;
}

.kahraman-ic {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 68px);
    align-items: start;
}

.kahraman-sol { display: grid; gap: clamp(22px, 2.6vw, 30px); }

/* Hız çizgileri — ivme jesti */
.hiz-cizgiler {
    position: absolute;
    top: 0;
    right: -6%;
    width: 46%;
    height: 100%;
    pointer-events: none;
    opacity: .5;
    background-image: repeating-linear-gradient(
        108deg,
        transparent 0 54px,
        var(--cizgi) 54px 55px
    );
    -webkit-mask-image: linear-gradient(255deg, #000 12%, transparent 82%);
            mask-image: linear-gradient(255deg, #000 12%, transparent 82%);
}

/* Kademeli giriş animasyonu */
.giris-anim { animation: yukari-gel .62s cubic-bezier(.2, .8, .2, 1) both; }
.g1 { animation-delay: .05s }
.g2 { animation-delay: .13s }
.g3 { animation-delay: .21s }
.g4 { animation-delay: .29s }
.g5 { animation-delay: .37s }
.g6 { animation-delay: .45s }

@keyframes yukari-gel {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .giris-anim { animation: none; opacity: 1; transform: none; }
}

/* --- 17. Kaydırmada beliren ----------------------------------------------- */
.belir {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .66s cubic-bezier(.2, .8, .2, 1), transform .66s cubic-bezier(.2, .8, .2, 1);
}

.belir.gorunur { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .belir { opacity: 1; transform: none; transition: none; }
}

/* --- 18. Sayfa başlığı bandı ---------------------------------------------- */
.sayfa-basi {
    position: relative;
    padding-block: clamp(44px, 5.5vw, 76px) clamp(34px, 4vw, 52px);
    border-bottom: 1px solid var(--cizgi);
    overflow: hidden;
}

.sayfa-basi-ic {
    display: grid;
    gap: 18px;
    max-width: 62ch;
}

.kirinti {
    display: flex;
    align-items: center;
    gap: 9px;
    list-style: none;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gri);
}

.kirinti li { display: flex; align-items: center; gap: 9px; }

.kirinti li:not(:last-child)::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--cizgi-koyu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
}

.kirinti a { color: var(--gri); }
.kirinti a:hover { color: var(--turuncu-metin); }
.kirinti [aria-current="page"] { color: var(--yazi); }

/* --- 19. Form ------------------------------------------------------------- */
.form-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.alan { display: grid; gap: 7px; }
.alan.tam { grid-column: 1 / -1; }

.alan label {
    font-family: var(--font-mono);
    font-size: .688rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gri);
}

.alan input,
.alan select,
.alan textarea {
    width: 100%;
    padding: 13px 15px;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-koyu);
    border-radius: 8px;
    font-family: var(--font-govde);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--yazi);
    transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.alan textarea { resize: vertical; min-height: 148px; }

.alan select {
    /* Safari, ön eksiz appearance'ı eski sürümlerde tanımıyor; yerel ok kalıyor
       ve altındaki özel chevron ile üst üste biniyordu. */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23776A62' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 40px;
}

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
    outline: none;
    border-color: var(--turuncu);
    box-shadow: 0 0 0 3px rgba(228, 85, 31, .13);
}

.alan input::placeholder,
.alan textarea::placeholder { color: #7C6D64; }

.alan-hata {
    font-size: .8125rem;
    color: #B5341A;
    line-height: 1.4;
}

.alan-hata:empty { display: none; }

.tuzak {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.uyari {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 19px;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: .9375rem;
    line-height: 1.6;
}

.uyari i { margin-top: .22em; flex: none; }
.uyari-olumlu { background: #F0F7F0; border-color: #C6E0C6; color: #2C5F2E; }
.uyari-olumsuz { background: #FDF1EE; border-color: #F2CFC5; color: #A33A20; }

/* --- 20. İletişim yan bilgisi --------------------------------------------- */
.iletisim-satiri {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 0;
    border-bottom: 1px solid var(--cizgi);
}

.iletisim-satiri:last-child { border-bottom: 0; }

.iletisim-ikon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(228, 85, 31, .09);
    color: var(--turuncu);
    font-size: .9375rem;
    flex: none;
}

.harita {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cizgi-acik);
}

.harita iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- 21. Alt bilgi -------------------------------------------------------- */
.alt-bilgi {
    background: var(--ink-zemin);
    color: var(--ink-gri);
    padding-block: clamp(46px, 5vw, 66px) 26px;
    position: relative;
    overflow: hidden;
}

.alt-izgara {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(auto-fit, minmax(158px, 1fr));
    gap: clamp(28px, 3.4vw, 46px);
}

.alt-baslik {
    font-family: var(--font-mono);
    font-size: .688rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--krem);
    margin-bottom: 15px;
}

.alt-liste { list-style: none; display: grid; gap: 9px; }

.alt-liste a {
    color: var(--ink-gri);
    font-size: .875rem;
    transition: color var(--gecis-hizli);
}

.alt-liste a:hover { color: var(--turuncu-acik); }

.alt-iletisim {
    list-style: none;
    display: grid;
    gap: 13px;
    font-size: .875rem;
    line-height: 1.6;
}

.alt-iletisim li { display: flex; gap: 11px; align-items: flex-start; }
.alt-iletisim i { color: var(--turuncu-acik); margin-top: .28em; width: 14px; flex: none; }
.alt-iletisim a { color: var(--ink-gri); }
.alt-iletisim a:hover { color: var(--turuncu-acik); }

.sosyal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--ink-cizgi);
    border-radius: 9px;
    color: var(--ink-gri);
    transition: background var(--gecis-hizli), color var(--gecis-hizli), border-color var(--gecis-hizli);
}

.sosyal:hover {
    background: var(--turuncu);
    border-color: var(--turuncu);
    color: var(--beyaz);
}

.alt-son {
    margin-top: clamp(32px, 4vw, 46px);
    padding-top: 22px;
    border-top: 1px solid var(--ink-cizgi);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .07em;
    color: #9E8F86;
}

.alt-yasal { display: flex; gap: 18px; flex-wrap: wrap; }
.alt-yasal a { color: #9E8F86; }
.alt-yasal a:hover { color: var(--turuncu-acik); }

/* --- 22. Çerez bildirimi -------------------------------------------------- */
.cerez {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    max-width: 680px;
    margin-inline: auto;
    padding: 20px 22px;
    background: var(--beyaz);
    border: 1px solid var(--cizgi-koyu);
    border-radius: 14px;
    box-shadow: 0 22px 52px -22px rgba(43, 33, 29, .38);
    display: none;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.cerez.acik { display: flex; }
.cerez p { flex: 1 1 300px; font-size: .875rem; line-height: 1.6; color: var(--gri); }
.cerez .satir { gap: 10px; }

/* --- 23. Yukarı çık ------------------------------------------------------- */
/* Yüzen eylem yığını: WhatsApp + yukarı çık */
.yuzen {
    position: fixed;
    right: 20px;
    /* Çerez kutusu açıkken yüzen butonlar onun üstüne taşınır; aksi halde
       mobilde WhatsApp butonu kutunun altında kalıp tıklanamıyordu. */
    bottom: calc(20px + var(--cerez-h, 0px));
    transition: bottom var(--gecis);
    z-index: 70;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.wa-buton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--murekkep);
    color: var(--krem);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px -12px rgba(43, 33, 29, .5);
    transition: background var(--gecis-hizli), color var(--gecis-hizli), transform var(--gecis-hizli);
}

.wa-buton .ikon { width: 1.3em; height: 1.3em; }

/* Üzerine gelince WhatsApp'ın kendi yeşiline döner: tanınırlık için */
.wa-buton:hover {
    background: #1FA855;
    color: #fff;
    transform: translateY(-2px);
}

.yukari {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--murekkep);
    color: var(--krem);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis), background var(--gecis-hizli);
}

.yukari.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.yukari:hover { background: var(--turuncu); }

.yukari::before {
    content: "";
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
    transform: rotate(-90deg);
}

/* --- 24. Yardımcılar ------------------------------------------------------ */
.gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.orta { text-align: center; }
.tam-genislik { width: 100%; }

.zemin-beyaz { background: var(--beyaz); }
.zemin-krem { background: var(--krem); }
.ust-cizgi { border-top: 1px solid var(--cizgi); }
.alt-cizgi { border-bottom: 1px solid var(--cizgi); }

/* Uzun içerik (politika sayfaları) */
.yazi-akisi { max-width: 74ch; }
.yazi-akisi h2 { margin-top: 44px; margin-bottom: 14px; font-size: 1.42rem; font-weight: 500; }
.yazi-akisi h2:first-child { margin-top: 0; }
.yazi-akisi h3 { margin-top: 30px; margin-bottom: 10px; font-size: 1.06rem; font-weight: 600; }
.yazi-akisi p { margin-bottom: 15px; color: var(--yazi-yumusak); line-height: 1.78; }
.yazi-akisi ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 9px; }

.yazi-akisi ul li {
    position: relative;
    padding-left: 23px;
    color: var(--yazi-yumusak);
    line-height: 1.7;
}

.yazi-akisi ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: 10px;
    height: 10px;
    background: var(--turuncu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
}

/* --- 25. Fotoğraflar ------------------------------------------------------
   Stok fotoğraflar farklı kaynaklardan gelir; tek bir sıcak aileye indirmek
   için hepsine aynı doygunluk düşürme + turuncu tül uygulanır. Böylece
   görseller kağıt/mürekkep paletiyle çakışmaz.
   ------------------------------------------------------------------------ */
/* <picture>, <img> ile sarmalayıcı arasına girdiği için ölçüyü aktarması gerekir */
.foto picture,
.foto-band picture { display: contents; }

.foto {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--murekkep);
    line-height: 0;
}

.foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.6) contrast(1.05) brightness(.99);
    transition: filter var(--gecis), transform 640ms cubic-bezier(.2, .8, .2, 1);
}

/* Sıcak tül: fotoğrafı markanın rengine bağlar */
.foto::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(205deg, rgba(228, 85, 31, .20), rgba(43, 33, 29, .26));
}

/* Bağlantılı kartlarda görsel canlanır */
a:hover > .foto img,
a.kart:hover .foto img,
.foto-canli:hover img {
    filter: saturate(.9) contrast(1.05) brightness(1);
    transform: scale(1.035);
}

.foto-4-3 { aspect-ratio: 4 / 3; }
.foto-16-9 { aspect-ratio: 16 / 9; }
.foto-genis { aspect-ratio: 21 / 8; }

/* Tam genişlik fotoğraf bandı — üzerine yazı gelir */
.foto-band {
    position: relative;
    overflow: hidden;
    background: var(--murekkep);
    min-height: clamp(280px, 32vw, 420px);
    display: flex;
    align-items: flex-end;
}

.foto-band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.5) contrast(1.06);
}

.foto-band::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(95deg, rgba(43, 33, 29, .9) 0%, rgba(43, 33, 29, .68) 46%, rgba(43, 33, 29, .3) 100%),
        linear-gradient(0deg, rgba(228, 85, 31, .16), rgba(228, 85, 31, .02));
}

.foto-band-ic {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(32px, 4vw, 52px);
}

.foto-band .etiket { color: var(--ink-gri); }
.foto-band .etiket::before { background: var(--turuncu-acik); }
.foto-band h2,
.foto-band p { color: var(--ink-yazi); }
.foto-band p { color: #D9CCC3; max-width: 46ch; }

/* Detay sayfalarındaki ince şerit — yazısız, ritim için */
.foto-serit {
    aspect-ratio: 21 / 7;
    border-radius: 0;
}

@media (max-width: 720px) {
    .foto-serit { aspect-ratio: 16 / 9; }
    .foto-band { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
    .foto img { transition: none; }
    a:hover > .foto img,
    a.kart:hover .foto img,
    .foto-canli:hover img { transform: none; }
}

/* --- 25b. Odoo şeması ------------------------------------------------------
   "Tek veritabanı" mesajını anlatan animasyonlu akış. HTML+CSS ile kurulur;
   dar ekranda dikey akışa döner. Tüm hareket .gorunur sınıfıyla tetiklenir.
   ------------------------------------------------------------------------ */
.sema {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, .82fr) auto minmax(0, .78fr);
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    padding: clamp(22px, 3vw, 38px);
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
}

.sema-sutun { display: grid; gap: 9px; align-content: center; }
.sema-sutun-basi { margin-bottom: 4px; }

.sema-cip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    background: var(--kagit);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--yazi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sema-cip .ikon { color: var(--turuncu-metin); }

.sema-cip-sonsuz {
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .08em;
    color: var(--gri);
    font-weight: 400;
    border-style: dashed;
    background: transparent;
}

.sema-cip-cikti { border-color: rgba(228, 85, 31, .3); background: rgba(228, 85, 31, .05); }

/* --- Akış hattı --- */
.sema-akis {
    position: relative;
    height: 2px;
    min-width: clamp(38px, 6vw, 92px);
    align-self: center;
}

.sema-hat {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--cizgi-koyu), var(--turuncu));
    transform: scaleX(0);
    transform-origin: left center;
}

.sema-nokta {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--turuncu);
    opacity: 0;
}

.sema-nokta-cikti { background: var(--turuncu-acik); }

/* Hattın ucundaki chevron — markanın ileri jesti */
.sema-akis::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background: var(--turuncu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
    opacity: 0;
}

.sema.gorunur .sema-akis::after { animation: sema-uc-gel .35s .95s ease-out forwards; }

@keyframes sema-uc-gel { to { opacity: 1; } }

/* --- Merkez --- */
.sema-merkez {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: clamp(18px, 2.4vw, 26px) clamp(12px, 1.8vw, 20px);
    border: 1px solid var(--turuncu);
    border-radius: var(--radius);
    background: var(--murekkep);
    text-align: center;
    width: 100%;
    transform: scale(.9);
    opacity: 0;
}

.sema-merkez-ikon { width: 1.9em; height: 1.9em; color: var(--turuncu-acik); }
.sema-merkez-ad { font-size: .95rem; font-weight: 600; color: var(--ink-yazi); letter-spacing: -.015em; }

.sema-merkez-alt {
    font-family: var(--font-mono);
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-gri);
}

.sema-halka {
    position: absolute;
    inset: -1px;
    border: 1px solid var(--turuncu);
    border-radius: var(--radius);
    opacity: 0;
    pointer-events: none;
}

/* --- Görünür olunca çalışan sıra --- */
.sema.gorunur .sema-cip { animation: sema-cip-gel .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--s) * 70ms); }
.sema.gorunur .sema-hat { animation: sema-hat-ciz .55s .48s cubic-bezier(.4, 0, .2, 1) forwards; }
.sema.gorunur .sema-merkez { animation: sema-merkez-gel .5s .95s cubic-bezier(.2, .8, .2, 1) forwards; }
.sema.gorunur .sema-halka { animation: sema-nabiz 3s 1.6s ease-out infinite; }
.sema.gorunur .sema-cip-cikti { animation-delay: calc(1.35s + var(--s) * 90ms); }
.sema.gorunur .sema-nokta { animation: sema-nokta-ak 2.2s linear infinite; animation-delay: calc(1.5s + var(--g)); }

@keyframes sema-cip-gel {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes sema-hat-ciz { to { transform: scaleX(1); } }

@keyframes sema-merkez-gel {
    to { opacity: 1; transform: scale(1); }
}

@keyframes sema-nabiz {
    0% { opacity: .75; transform: scale(1); }
    70% { opacity: 0; transform: scale(1.12); }
    100% { opacity: 0; transform: scale(1.12); }
}

@keyframes sema-nokta-ak {
    0% { opacity: 0; left: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; left: 100%; }
}

/* --- Dar ekran: dikey akış --- */
@media (max-width: 900px) {
    .sema { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .sema-akis {
        height: clamp(28px, 5vw, 44px);
        width: 2px;
        min-width: 0;
        justify-self: center;
        margin-block: 12px;
    }

    .sema-hat { transform: scaleY(0); transform-origin: top center; background: linear-gradient(180deg, var(--cizgi-koyu), var(--turuncu)); }
    .sema.gorunur .sema-hat { animation-name: sema-hat-ciz-dikey; }
    @keyframes sema-hat-ciz-dikey { to { transform: scaleY(1); } }

    .sema-nokta { left: 50%; margin-left: -3.5px; top: 0; margin-top: 0; }
    .sema.gorunur .sema-nokta { animation-name: sema-nokta-ak-dikey; }
    @keyframes sema-nokta-ak-dikey {
        0% { opacity: 0; top: 0; }
        12% { opacity: 1; }
        88% { opacity: 1; }
        100% { opacity: 0; top: 100%; }
    }

    .sema-cip { white-space: normal; }

    .sema-akis::after {
        right: 50%;
        margin-right: -4.5px;
        top: auto;
        bottom: -3px;
        margin-top: 0;
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sema .sema-cip,
    .sema .sema-merkez { animation: none !important; opacity: 1; transform: none; }
    .sema .sema-hat { animation: none !important; transform: none; }
    .sema .sema-nokta,
    .sema .sema-halka { display: none; }
}

/* --- 25c. Hareket paketi ---------------------------------------------------
   Kayan şerit, sayaç, parallax, süreç sahnelemesi ve sayfa geçişi.
   Hepsi prefers-reduced-motion altında kapanır.
   ------------------------------------------------------------------------ */

/* --- Kayan şerit ("ivme" jesti) --- */
.serit {
    border-block: 1px solid var(--cizgi);
    background: var(--krem);
    overflow: hidden;
    padding-block: 15px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.serit-ic {
    display: flex;
    width: max-content;
    animation: serit-ak 46s linear infinite;
}

.serit:hover .serit-ic { animation-play-state: paused; }

.serit-grup {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    flex: none;
}

.serit-oge {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-mono);
    font-size: .688rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gri);
    white-space: nowrap;
}

.serit-oge::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    background: var(--turuncu);
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
            mask: var(--chevron-mask) center / contain no-repeat;
}

@keyframes serit-ak { to { transform: translateX(-50%); } }

.ink .serit, .serit-ink {
    background: var(--ink-zemin-2);
    border-color: var(--ink-cizgi);
}

.serit-ink .serit-oge { color: var(--ink-gri); }
.serit-ink .serit-oge::before { background: var(--turuncu-acik); }

/* --- Sayaç --- */
.sayac-degeri { font-variant-numeric: tabular-nums; }

/* --- Parallax (fotoğraf bantları) --- */
.foto-band img { will-change: transform; }
.foto-band.parallax img { height: 124%; top: -12%; }

/* --- Süreç sahnelemesi ---
   İki kural:
   1) Pasif adımlar SOLDURULMAZ. Saydamlık düşürmek metin kontrastını WCAG AA
      eşiğinin altına indiriyordu.
   2) Adımlar DİKEY OLARAK OYNATILMAZ. Bitişik adımların üst çizgileri ekranda
      tek bir sürekli çizgi gibi okunuyor; aktif adımı yukarı kaldırmak bu
      çizgide kopukluk yaratıyordu (Safari'de bildirildi, her tarayıcıda oluyor).
   İlerleme yalnızca çizginin soldan sağa büyümesi ve numaranın renklenmesiyle
   anlatılır — böylece çizgi her zaman aynı hizada kalır. */
.adimlar.sahne .adim::before {
    width: 34px;
    background: var(--cizgi-koyu);
    transition: width .55s cubic-bezier(.2, .8, .2, 1), background .3s;
}

.adimlar.sahne .adim .adim-no {
    color: var(--gri);
    transition: color .3s;
}

.adimlar.sahne .adim.etkin::before,
.adimlar.sahne .adim.gecildi::before {
    width: 100%;
    background: var(--turuncu);
}

.adimlar.sahne .adim.etkin .adim-no,
.adimlar.sahne .adim.gecildi .adim-no { color: var(--turuncu-metin); }

.ink .adimlar.sahne .adim::before { background: var(--ink-cizgi); }
.ink .adimlar.sahne .adim .adim-no { color: var(--ink-gri); }
.ink .adimlar.sahne .adim.etkin::before,
.ink .adimlar.sahne .adim.gecildi::before { background: var(--turuncu-acik); }
.ink .adimlar.sahne .adim.etkin .adim-no,
.ink .adimlar.sahne .adim.gecildi .adim-no { color: var(--turuncu-acik); }

/* --- Sayfa geçişi (destekleyen tarayıcılarda) --- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: gecis-cik .22s ease-in both; }
::view-transition-new(root) { animation: gecis-gir .32s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes gecis-cik { to { opacity: 0; } }
@keyframes gecis-gir { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    .serit-ic { animation: none; }
    .foto-band.parallax img { height: 100%; top: 0; transform: none !important; }
    .adimlar.sahne .adim::before { transition: none; }
    .adimlar.sahne .adim::before { width: 34px; background: var(--turuncu); transition: none; }
    .adimlar.sahne .adim.etkin::before,
    .adimlar.sahne .adim.gecildi::before { width: 34px; }
    .adimlar.sahne .adim .adim-no { color: var(--turuncu-metin); }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
}

/* --- 25d. Modül gezgini ----------------------------------------------------
   Kart tıklanınca sayfadan ayrılmadan, kartın satırının hemen altında açılan
   önizleme. JavaScript yoksa kartlar normal bağlantı olarak çalışır.
   ------------------------------------------------------------------------ */
.gezgin-panel {
    grid-column: 1 / -1;
    margin-top: clamp(18px, 2vw, 26px);
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--turuncu);
    border-radius: var(--radius);
    background: var(--beyaz);
    display: grid;
    gap: 14px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--gecis), transform var(--gecis);
}

.gezgin-panel.acik { opacity: 1; transform: translateY(0); }
.gezgin-panel[hidden] { display: none; }

.gezgin-ust { display: flex; align-items: flex-start; gap: 15px; }
.gezgin-baslik { flex: 1; display: grid; gap: 5px; }
.gezgin-panel .baslik-3 { margin: 0; }
.gezgin-panel p { margin: 0; }
.gezgin-panel .buton { justify-self: start; margin-top: 4px; }

.gezgin-kapat {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 8px;
    color: var(--gri);
    cursor: pointer;
    transition: background var(--gecis-hizli), color var(--gecis-hizli), border-color var(--gecis-hizli);
}

.gezgin-kapat:hover {
    background: var(--murekkep);
    border-color: var(--murekkep);
    color: var(--krem);
}

/* Seçili kart: alt kenarında turuncu bir çizgi panele bağlanıyormuş gibi durur */
a.kart.secili {
    border-color: var(--turuncu);
    transform: translateY(-3px);
}

a.kart.secili::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .gezgin-panel { transition: none; }
    a.kart.secili { transform: none; }
}

/* --- 25e. Blog -------------------------------------------------------------
   Yazı listesi, öne çıkan yazı, yazı düzeni ve etiket rozetleri.
   ------------------------------------------------------------------------ */
.yazi-kunye {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .688rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gri);
    line-height: 1.5;
}

/* --- Öne çıkan yazı --- */
.yazi-one-cikan {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 3vw, 44px);
    padding: clamp(22px, 2.6vw, 32px);
    background: var(--beyaz);
    border: 1px solid var(--cizgi);
    border-radius: var(--radius);
    color: inherit;
    transition: border-color var(--gecis), transform var(--gecis);
}

.yazi-one-cikan:hover {
    border-color: var(--cizgi-koyu);
    transform: translateY(-3px);
    color: inherit;
}

.yazi-one-cikan:hover .baslik-2 { color: var(--turuncu-metin); }
.yazi-one-cikan .baslik-2 { transition: color var(--gecis-hizli); }

/* --- Yazı sayfası düzeni --- */
.yazi-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(30px, 4vw, 64px);
    align-items: start;
}

.yazi-govde { max-width: 72ch; }

.yazi-yan {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 92px;
}

.icindekiler {
    list-style: none;
    counter-reset: ic;
    display: grid;
    gap: 9px;
    margin-top: 4px;
}

.icindekiler li {
    counter-increment: ic;
    display: flex;
    gap: 10px;
    font-size: .875rem;
    line-height: 1.45;
}

.icindekiler li::before {
    content: counter(ic, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: .688rem;
    color: var(--turuncu-metin);
    flex: none;
    padding-top: .2em;
}

.icindekiler a { color: var(--yazi-yumusak); text-decoration: none; }
.icindekiler a:hover { color: var(--turuncu-metin); text-decoration: underline; text-underline-offset: .18em; }

/* Başlığa atlarken yapışkan üst çubuk metni örtmesin */
.yazi-govde h2, .yazi-govde h3 { scroll-margin-top: 92px; }

/* --- Etiket rozetleri --- */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 999px;
    background: var(--beyaz);
    font-size: .8125rem;
    color: var(--yazi);
    text-decoration: none;
    transition: border-color var(--gecis-hizli), background var(--gecis-hizli), color var(--gecis-hizli);
}

.rozet:hover { border-color: var(--murekkep); background: var(--murekkep); color: var(--krem); }
.rozet:hover .rozet-adet { color: var(--krem); }

.rozet-etkin { border-color: var(--turuncu); background: rgba(228, 85, 31, .08); color: var(--turuncu-metin); }

.rozet-adet { font-family: var(--font-mono); font-size: .688rem; color: var(--gri); }

@media (max-width: 900px) {
    .yazi-duzen { grid-template-columns: minmax(0, 1fr); }
    .yazi-yan { position: static; }
    .yazi-one-cikan { grid-template-columns: minmax(0, 1fr); }
}

/* --- 26. Duyarlı davranış ------------------------------------------------- */
@media (max-width: 1080px) {
    .kahraman-ic { grid-template-columns: 1fr; }
    .hiz-cizgiler { display: none; }
    .izgara-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .izgara-3, .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    /* backdrop-filter, transform gibi, position:fixed torunlar icin KAPSAYICI BLOK
       olusturur. Bu yuzden mobil menu ekrana degil baslik kutusuna gore
       konumlanip dar bir seride sikisiyordu. Mobilde bulaniklik kaldirilir. */
    .ust {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--kagit);
    }

    /* nav akistan cikarilir: icindeki liste zaten position:fixed ama nav'in
       kendisi 0 genislikte bir esnek oge olarak kalip butonu ortaya itiyordu. */
    .ust-ic > nav { position: absolute; }

    .menu-dugmesi {
        display: grid;
        margin-left: auto;
        width: 44px;
        height: 44px;
    }

    .ana-menu {
        position: fixed;
        inset: 62px 0 0;
        z-index: 55;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 18px var(--kenar) 40px;
        background: var(--kagit);
        border-top: 1px solid var(--cizgi);
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
    }

    .ana-menu.acik { opacity: 1; visibility: visible; transform: translateY(0); }

    .menu-bag {
        justify-content: space-between;
        width: 100%;
        padding: 14px 4px;
        border-bottom: 1px solid var(--cizgi);
        border-radius: 0;
        font-size: 1rem;
    }

    .menu-bag:hover, .menu-bag[aria-expanded="true"] { background: transparent; }

    .acilir {
        position: static;
        transform: none;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--cizgi);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 4px 0 18px;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    .menu-ogesi.acik .acilir { display: block; transform: none; }

    .acilir-izgara { grid-template-columns: 1fr; gap: 2px; }

    /* Dokunma hedefi: 35px bağlantılar parmakla ıskalanıyordu (iOS/Android taban 44px) */
    .acilir-bag { min-height: 44px; padding: 11px 10px; }
    .acilir-alt { flex-direction: column; align-items: stretch; }
    .acilir-alt .buton { justify-content: center; }

    /* Ana çağrı butonu mobilde tamamen gizleniyordu; menünün altında gösterilir. */
    .menu-cta {
        margin-top: 22px;
        border-bottom: 0;
    }

    .menu-cta .buton { width: 100%; justify-content: center; }
    .ust-ic { padding-block: 11px; }
}

@media (max-width: 720px) {
    :root { --kenar: 18px; }

    /* iOS, 16px'ten küçük yazılı bir alana odaklanınca sayfayı yakınlaştırır
       ve kullanıcı elle geri uzaklaştırmak zorunda kalır. */
    .alan input,
    .alan select,
    .alan textarea { font-size: 16px; }

    /* Dokunma hedefleri */
    .rozet { min-height: 44px; padding-inline: 16px; }
    .ok-bag { min-height: 44px; }

    /* Liste içindeki satır bağlantıları 18px yükseklikteydi; WCAG 2.2 AA
       "Target Size (Minimum)" ölçütünün 24px tabanının altında kalıyordu. */
    .alt-liste a,
    .alt-iletisim a,
    .alt-yasal a,
    .kirinti a,
    .iletisim-satiri a,
    .liste li a {
        display: inline-block;
        padding-block: 5px;
    }

    .alt-liste { gap: 4px; }
    .alt-yasal { gap: 14px; }

    .adim { padding-right: 0 !important; }
    .kunye-satir { flex-direction: column; gap: 4px; }
    .kunye-satir dd { text-align: left; }
    .alt-izgara { grid-template-columns: 1fr 1fr; }
    .alt-izgara > :first-child { grid-column: 1 / -1; }
    .alt-son { flex-direction: column; align-items: flex-start; }
    .sss-cevap { padding-right: 0; }
    .iv-etiket { font-size: 7.5px; }
}

@media (max-width: 480px) {
    .wa-buton { width: 46px; padding: 0; justify-content: center; }
    .wa-yazi { display: none; }
    /* --cerez-h korunmali: sabit bir bottom degeri calc() kuralini eziyordu */
    .yuzen { right: 14px; bottom: calc(14px + var(--cerez-h, 0px)); }
    .alt-izgara { grid-template-columns: 1fr; }
    .buton { width: 100%; justify-content: center; }
    .satir .buton { flex: 1 1 100%; }
    .cerez { padding: 17px 18px; }
    .cerez .buton { width: auto; flex: 1; }
}

/* --- 27. Baskı ------------------------------------------------------------ */
@media print {
    .ust, .alt-bilgi, .cerez, .yukari, .hiz-cizgiler { display: none !important; }
    body { background: #fff; }
    .kart { break-inside: avoid; }
}