/* ==========================================================================
   6SIFIR2 — Site stilleri
   Mobil oncelikli. Marka kimligi korunur: kirmizi vurgu + lacivert govde.
   ========================================================================== */

/* --------------------------------------------------- Tasarim degiskenleri */
:root {
    /* Marka */
    --brand:        #ff0606;
    --brand-dark:   #d40202;
    --brand-soft:   #fff1f1;

    /* Notr */
    --ink:          #1f2a44;
    --ink-soft:     #3c4867;
    --muted:        #6b7280;
    --line:         #e6e9ee;
    --bg:           #ffffff;
    --bg-alt:       #f7f8fa;
    --bg-dark:      #141c2f;
    --surface:      #ffffff;   /* kart, panel ve form zemini */
    --surface-2:    #f7f8fa;

    /* Durum */
    --ok:           #12805c;
    --warn:         #b45309;
    --err:          #b91c1c;
    --info:         #1d4ed8;

    /* Tipografi */
    --font-head:    'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-body:    'Cabin', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Olcu */
    --wrap:         1240px;
    --gap:          clamp(16px, 3vw, 32px);
    --radius:       14px;
    --radius-sm:    8px;
    --radius-lg:    22px;

    --shadow-sm:    0 1px 2px rgba(20, 28, 47, .06), 0 2px 8px rgba(20, 28, 47, .05);
    --shadow:       0 4px 12px rgba(20, 28, 47, .08), 0 12px 32px rgba(20, 28, 47, .07);
    --shadow-lg:    0 12px 28px rgba(20, 28, 47, .12), 0 32px 64px rgba(20, 28, 47, .1);

    --header-h:     84px;
    --ease:         cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- Sifirla */
*, *::before, *::after { box-sizing: border-box; }

/* display kurallari [hidden] ozniteligini ezmesin */
[hidden] { display: none !important; }

html {
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -.015em;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }

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

@media (prefers-reduced-motion: reduce) {
    /*
     * "Hareketi azalt" acikken giris animasyonlari kapanir.
     * Haber seridi disaridadir: akmayan serit bozuk gorunuyor,
     * yerine yavaslatilmis hali kullanilir (asagida).
     */
    *:not(.ticker__track), *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--brand);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
    width: min(100% - 2 * clamp(16px, 4vw, 40px), var(--wrap));
    margin-inline: auto;
}

/* ---------------------------------------------------------------- Butonlar */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    --btn-bd: var(--brand);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .02em;
    line-height: 1;
    text-align: center;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 2px solid var(--btn-bd);
    border-radius: 999px;
    cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary { --btn-bg: var(--brand); --btn-bd: var(--brand); }
.btn--primary:hover { --btn-bg: var(--brand-dark); --btn-bd: var(--brand-dark); }

.btn--outline { --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: currentColor; }
.btn--outline:hover { --btn-bg: rgba(255, 255, 255, .14); }

/* Beyaz buton her zaman koyu yazi tasir; tema degisse de okunakli kalir */
.btn--light { --btn-bg: #ffffff; --btn-fg: #1f2a44; --btn-bd: #ffffff; }
.btn--light:hover { --btn-bg: #f2f4f8; --btn-bd: #f2f4f8; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: var(--bg-alt); --btn-bd: var(--ink); }

.btn--sm  { padding: 10px 18px; font-size: .82rem; }
.btn--lg  { padding: 16px 36px; font-size: 1rem; }
.btn--block { width: 100%; }

.link-more {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ Baslik */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-dark);
    color: #fff;
    transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    min-height: var(--header-h);
    /* Menü uzun olduğunda başlık taşmasın */
    min-width: 0;
}

.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--header-h);
}
/* Logo yuksekligi baslik yuksekligi ile ayni */
.brand img {
    height: var(--header-h);
    width: auto;
    max-height: none;
    object-fit: contain;
}

.main-nav { margin-inline-start: auto; min-width: 0; }
.main-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.main-nav__item { position: relative; }

.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 2px;
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .88);
    white-space: nowrap;
}
.main-nav__link:hover,
.main-nav__link.active { color: #fff; }

.main-nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--brand);
    transition: width .25s var(--ease);
}
.main-nav__link:hover::after,
.main-nav__link.active::after { width: 100%; }

/* "Bagis Yap" dugmesi */
.main-nav__link.btn-bagis {
    padding: 10px 20px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
}
.main-nav__link.btn-bagis:hover { background: var(--brand-dark); }
.main-nav__link.btn-bagis::after { display: none; }

.caret {
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.submenu {
    position: absolute;
    top: 100%;
    left: -14px;
    /* Okuma çizgisi (z-index 5) açılan menünün üstüne binmesin */
    z-index: 20;
    min-width: 230px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.main-nav__item:hover > .submenu,
.main-nav__item:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.submenu a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .9rem;
}
.submenu a:hover { background: var(--brand-soft); color: var(--brand); }

.header-tools { display: flex; align-items: center; gap: 10px; }

.icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
/*
 * Simge ölçüsü işaretlemede değil burada duruyor: düğme, çizgi
 * ve hamburger aynı orana bağlı kalsın, biri büyüyünce öteki
 * geride kalmasın.
 */
.icon-btn svg { width: 24px; height: 24px; }

.cart-count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 18px; height: 18px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}

/*
 * Menü düğmesi.
 *
 * Üç eşit çizgi yerine daralan, ince çizgiler: daha sakin durur ve
 * açıkken çarpıya dönüşür.
 */
.burger {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    margin-inline-start: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.burger span {
    display: block;
    width: 24px;
    height: 1.8px;
    background: var(--surface);
    border-radius: 2px;
    transition: transform .28s var(--ease), opacity .18s var(--ease), width .28s var(--ease);
}
.burger span:nth-child(2) { width: 16px; }
.burger:hover span:nth-child(2) { width: 24px; }

.burger[aria-expanded="true"] span:nth-child(1) { width: 24px; transform: translateY(6.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-6.8px) rotate(-45deg); }

.header-search {
    padding: 16px 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
}
.header-search form { display: flex; gap: 10px; }
.header-search input {
    flex: 1;
    padding: 13px 18px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--bg-alt);
}
.header-search input:focus { border-color: var(--brand); outline: none; background: var(--surface); }

/* -------------------------------------------------------- Sosyal medya rayi */
.social-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 110;
    display: flex;
    flex-direction: column;
}
.social-rail a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: var(--social-fg, #fff);
    background: var(--social-bg, var(--bg-dark));
    transition: background .2s var(--ease);
}
.social-rail a:hover { background: var(--social-hover-bg, var(--brand)); color: var(--social-hover-fg, #fff); }

/* ------------------------------------------------------------------ Slider */
.hero {
    position: relative;
    height: var(--hero-h, 640px);
    max-height: calc(100vh - var(--header-h));
    overflow: hidden;
    background: var(--bg-dark);
}
.hero__track { height: 100%; }

.hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s var(--ease), visibility .7s;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Yazısı görselin içine işlenmiş slaytlarda görselin tamamı görünür;
 * kenarlarda kalan boşluk koyu zeminle doldurulur.
 */
.hero__slide--contain .hero__media { background: var(--bg-dark); }
.hero__slide--contain .hero__media img { object-fit: contain; }

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 28, 47, .92) 0%, rgba(20, 28, 47, .45) 60%, transparent 100%);
}

.hero__content { position: relative; z-index: 2; max-width: 640px; }
.hero__content--center { margin-inline: auto; text-align: center; }
.hero__content--right  { margin-inline-start: auto; text-align: right; }

.hero__subtitle {
    margin: 0 0 12px;
    font-family: var(--font-head);
    font-size: calc(.78rem * var(--hs));
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--brand);
}
/*
 * Slider yazi boyutu yonetimden ayarlanir: --hero-scale masaustu,
 * --hero-scale-m telefon icin. 1 = varsayilan boyut.
 */
.hero { --hs: var(--hero-scale, 1); }
@media (max-width: 900px) { .hero { --hs: var(--hero-scale-m, var(--hero-scale, 1)); } }

.hero__title {
    margin: 0 0 16px;
    color: inherit;
    font-size: calc(clamp(1.8rem, 5.2vw, 3.4rem) * var(--hs));
    font-weight: 800;
    line-height: 1.08;
}
.hero__text {
    margin: 0 0 24px;
    font-size: calc(clamp(.95rem, 1.45vw, 1.08rem) * var(--hs));
    opacity: .92;
    max-width: 50ch;
}
.hero__content--center .hero__text { margin-inline: auto; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__content--center .hero__actions { justify-content: center; }

.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    font-size: 1.9rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    transition: background .2s var(--ease);
}
.hero__arrow:hover { background: var(--brand); }
.hero__arrow--prev { left: clamp(10px, 2vw, 28px); }
.hero__arrow--next { right: clamp(10px, 2vw, 28px); }

.hero__dots {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 3;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}
.hero__dots button {
    width: 10px; height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: width .25s var(--ease), background .25s var(--ease);
}
.hero__dots button.is-active { width: 28px; border-radius: 999px; background: var(--brand); }

/* ------------------------------------------------------------ Haber seridi */
.ticker {
    display: flex;
    align-items: stretch;
    background: var(--ticker-bg, var(--bg-dark));
    color: var(--ticker-fg, #fff);
    overflow: hidden;
}
.ticker__label {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0 clamp(14px, 2vw, 26px);
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    /* Beyaz üzeri bordo; şerit ise bordo üzeri beyaz */
    color: var(--ticker-label-fg, #fff);
    background: var(--ticker-label-bg, var(--brand));
    white-space: nowrap;
}
.ticker__viewport { flex: 1; overflow: hidden; padding: 12px 0; }

.ticker__track {
    display: flex;
    width: max-content;
    gap: 48px;
    animation: ticker-scroll var(--ticker-speed, 40s) linear infinite;
}
.ticker.is-paused .ticker__track { animation-play-state: paused; }

/*
 * Telefonlarda "hareketi azalt" ayari acik oldugunda genel kural
 * tum animasyonlari durduruyor ve serit hic akmiyordu. O durumda
 * serit parmakla kaydirilabilir hale gelir; basliklar yine okunur.
 */
@media (prefers-reduced-motion: reduce) {
    .ticker__viewport {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ticker__viewport::-webkit-scrollbar { display: none; }
    /* Şerit dursun istemiyoruz; yalnızca yavaşlatılır ve
       parmakla da kaydırılabilir kalır. */
    .ticker__track {
        animation: ticker-scroll calc(var(--ticker-speed, 40s) * 1.8) linear infinite !important;
    }
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Akan yazinin rengi seritten ayri secilebilir */
    color: var(--ticker-marquee, inherit);
    font-size: .92rem;
    white-space: nowrap;
}
.ticker__item:hover { color: inherit; text-decoration: underline; }
/* Nokta akan yazıyla aynı renkte; marka kırmızısı şeritte göze batıyordu */
.ticker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    flex: 0 0 auto;
}
.ticker__date { opacity: .6; font-size: .82rem; }

/* ---------------------------------------------------------------- Bolumler */
.section { padding: clamp(48px, 7vw, 96px) 0; }

/* Bölüm arka planları artık "Sayfa Bölümleri" ekranından seçilir
   (bg_style: none | alt | dark | brand | custom). Aşağıdakiler yalnızca
   kendi tasarımını taşıyan iki bölüm için varsayılan görünümdür. */
/*
 * İki sınıf: bölüm listesinden gelen .section--dark ile aynı
 * ağırlıkta kalmasın; sayaçların kendi rengi her zaman kazanır.
 * Renkler yönetimden değiştirilir, boş bırakılırsa varsayılan kalır.
 *
 * Açık temada krem zemin, koyu temada lacivert. Simgeler saydam
 * arka planlı olduğu için ikisinde de olduğu gibi duruyor;
 * yalnızca arkalarındaki dairenin tonu değişiyor.
 */
.section.section--stats {
    background: var(--stats-bg, var(--bg-alt));
    color: var(--stats-fg, var(--ink));
}
.section--cta   { background: var(--brand); color: #fff; text-align: center; }

/*
 * Çağrı bloğu masaüstünde fazla yer kaplıyordu: dikey boşluk kısaldı,
 * logo bir tık küçüldü. Mobilde zaten dardı, orada değişmedi.
 */
@media (min-width: 981px) {
    .section--cta { padding-block: var(--cta-bosluk, 56px); }
    .section--cta .cta__logo { width: min(360px, 60vw); margin-bottom: 18px; }
    .section--cta .cta__text { margin-bottom: 20px; }
}

.section__head { margin-bottom: clamp(24px, 4vw, 44px); text-align: center; }
.section__head--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}
.section__title { margin: 0 0 6px; }
.section__subtitle { margin: 0; color: var(--muted); font-size: 1.02rem; }
.section--stats .section__title { color: var(--stats-fg, var(--ink)); }
.section--cta .section__title { color: #fff; }

.intro { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; }
.intro__text { font-size: 1.08rem; }

/* ---------------------------------------------------------------- Sayaclar */
.stats__lead { text-align: center; color: var(--stats-fg, var(--ink-soft)); opacity: .85; margin-bottom: 36px; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(20px, 3vw, 40px);
    text-align: center;
}
.stat__value {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--brand);
    line-height: 1.1;
}
.stat__label {
    display: block;
    margin-top: 4px;
    font-size: .9rem;
    letter-spacing: .04em;
    color: var(--stats-fg, var(--ink-soft));
    opacity: .9;
}

/* -------------------------------------------------------------- Kart izgara */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap);
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--gap);
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--bg-alt); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

.card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.card__date { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }
.card__title { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.card__title a { color: var(--ink); }
.card__title a:hover { color: var(--brand); }
.card__text { margin: 0; font-size: .94rem; color: var(--muted); }
.card__meta { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.card__more { margin-top: auto; padding-top: 8px; font-family: var(--font-head); font-weight: 600; font-size: .86rem; color: var(--brand); }

.badge {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 12px;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fff;
    background: var(--ink);
    border-radius: 999px;
}
.badge--devam      { background: var(--ok); }
.badge--planlanan  { background: var(--warn); }
.badge--tamamlanan { background: var(--muted); }

/* ------------------------------------------------------------- Urun kartlari */
.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.product-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--bg-alt); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    padding: 4px 10px;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.product-card__badge--out { background: var(--ink); left: auto; right: 10px; }
/* Rozetler görselin içinde kalır; kart metni her zaman üstte çizilir */
.product-card__badge { max-width: calc(100% - 20px); pointer-events: none; }
.product-card__body { position: relative; z-index: 1; background: inherit; }

.product-card__body { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1; }
.product-card__title { margin: 0; font-size: .98rem; line-height: 1.4; }
.product-card__title a { color: var(--ink); }
.product-card__title a:hover { color: var(--brand); }
.product-card__price { margin: 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.product-card__price strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); }
.product-card__old { color: var(--muted); font-size: .88rem; }

/* -------------------------------------------------------- Turkiye haritasi */
.tr-map { display: grid; gap: 20px; }
.tr-map__canvas { position: relative; }
.tr-map__svg { width: 100%; height: auto; }

.tr-map__path {
    cursor: pointer;
    transition: fill .18s var(--ease), filter .18s var(--ease);
}
.tr-map__path:hover,
.tr-map__path:focus,
.tr-map__path.is-active {
    fill: var(--map-hover, #1f2a44) !important;
    filter: drop-shadow(0 4px 10px rgba(20, 28, 47, .3));
    outline: none;
}
.tr-map__path.is-disabled { cursor: default; opacity: .55; }
.tr-map__marker { display: none; }

.tr-map__tooltip {
    position: absolute;
    z-index: 10;
    width: min(320px, calc(100vw - 40px));
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
}
.tr-map__close {
    position: absolute;
    top: 8px; right: 10px;
    width: 26px; height: 26px;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.tr-map__close:hover { background: var(--bg-alt); color: var(--ink); }

.tr-map__name { margin: 0 0 2px; font-size: 1.15rem; }
.tr-map__meta { margin: 0 0 10px; font-size: .84rem; color: var(--muted); }

.tr-map__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: .84rem;
}
.tr-map__stats b { color: var(--brand); font-family: var(--font-head); }

.tr-map__news { display: grid; gap: 3px; margin-bottom: 12px; }
.tr-map__news-label {
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand);
}
.tr-map__news-link { font-weight: 600; color: var(--ink); line-height: 1.35; }
.tr-map__news-link:hover { color: var(--brand); }
.tr-map__news-date { font-size: .78rem; color: var(--muted); }

.tr-map__more { font-family: var(--font-head); font-weight: 600; font-size: .86rem; }

.tr-map__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 24px;
    font-size: .86rem;
    color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); }
.legend-swatch--branch  { background: var(--map-branch, #ff0606); }
.legend-swatch--default { background: var(--map-default, #e6e9ee); }
.legend-hint { font-style: italic; opacity: .8; }

/* --------------------------------------------------------------- Cagri (CTA) */
.cta { max-width: 680px; margin-inline: auto; }
.cta__title { margin: 0 0 8px; }
.cta__text { margin: 0 0 24px; font-size: 1.08rem; opacity: .95; }

/* ------------------------------------------------------------------ Sayfalama */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: clamp(28px, 4vw, 48px);
}
.pagination__link {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    font-family: var(--font-head);
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.pagination__link:hover { border-color: var(--brand); color: var(--brand); }
.pagination__link.is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination__gap { padding: 0 6px; color: var(--muted); }

/* ------------------------------------------------------------------- Altbilgi */
.site-footer { background: var(--bg-dark); color: rgba(255, 255, 255, .78); }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(28px, 4vw, 56px);
    padding: clamp(44px, 6vw, 76px) 0;
}
.footer-col--brand { max-width: 320px; }
.footer-about { font-size: .92rem; margin: 16px 0 22px; }

.footer-title {
    margin: 0 0 16px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

.footer-links, .footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a, .footer-contact a { color: rgba(255, 255, 255, .78); font-size: .92rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--brand); }
.footer-contact li { font-size: .92rem; }

.newsletter { margin-top: 28px; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
}
.newsletter input::placeholder { color: rgba(255, 255, 255, .45); }
.newsletter input:focus { outline: none; border-color: var(--brand); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 0;
    font-size: .85rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-legal a { color: rgba(255, 255, 255, .78); }
.footer-legal a:hover { color: var(--brand); }

/* --------------------------------------------------------- Cerez ve WhatsApp */
.cookie-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px clamp(16px, 4vw, 40px);
    background: rgba(20, 28, 47, .97);
    color: #fff;
    backdrop-filter: blur(8px);
}
.cookie-bar p { margin: 0; font-size: .9rem; max-width: 70ch; }
.cookie-bar__actions { display: flex; gap: 8px; }

.whatsapp-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    color: #fff;
    background: #25d366;
    border-radius: 50%;
    box-shadow: var(--shadow);
}
.whatsapp-fab:hover { color: #fff; transform: scale(1.06); }

/* ------------------------------------------------------------------ Bildirim */
.notify-stack {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    right: 16px;
    z-index: 300;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
}
.notify {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-size: .92rem;
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    animation: notify-in .3s var(--ease);
}
.notify--success { background: var(--ok); }
.notify--error   { background: var(--err); }
.notify--warning { background: var(--warn); }
.notify--info    { background: var(--info); }
.notify__close { margin-inline-start: auto; background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; line-height: 1; }

@keyframes notify-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------- Hata sayfasi */
.error-page { text-align: center; }
.error-page__code {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 800;
    line-height: 1;
    color: var(--brand-soft);
}
.error-page__title { margin: -12px 0 10px; }
.error-page__text { color: var(--muted); margin-bottom: 26px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.error-page__debug { margin-top: 40px; text-align: left; font-size: .82rem; }
.error-page__debug pre { overflow-x: auto; padding: 16px; background: var(--bg-alt); border-radius: var(--radius-sm); }

/* ================================= MOBIL ================================= */
@media (max-width: 1100px) {
    .main-nav__list { gap: 12px; }
    .main-nav__link { font-size: .74rem; }
}



@media (max-width: 640px) {
    .ticker__label { font-size: .68rem; padding: 0 12px; }
    .ticker__item { font-size: .86rem; }
    .ticker__date { display: none; }

    /*
     * Telefonda tek sütun kartları devasa yapıyordu: bir haber
     * ekranın tamamını kaplıyor, ikincisini görmek için kaydırmak
     * gerekiyordu. İki sütun, listeyi bir bakışta gösteriyor.
     */
    .card-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product-card__body { padding: 12px; }

    /* İki sütuna sığması için kart içi küçülür */
    .card__body { padding: 12px; gap: 6px; }
    .card__title { font-size: .95rem; line-height: 1.3; }
    .card__excerpt { font-size: .82rem; }
    .card__media { aspect-ratio: 4 / 3; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); }

    .cookie-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-bar__actions { justify-content: center; }

    .notify-stack { left: 16px; right: 16px; width: auto; }
}

/* ==========================================================================
   İÇ SAYFALAR
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.container--narrow { max-width: 820px; }
.section--alt { background: var(--bg-alt); }

/* ------------------------------------------------------ Sayfa başlığı */
.page-hero {
    position: relative;
    padding: clamp(28px, 5vw, 56px) 0 clamp(24px, 4vw, 44px);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
}
.page-hero--image {
    background-image: linear-gradient(rgba(20, 28, 47, .78), rgba(20, 28, 47, .78)), var(--hero-bg);
    background-size: cover;
    /* Odak yönetimden seçilir: portrede yüz üstten kesilmesin */
    background-position: var(--hero-odak, center center);
    border-bottom: 0;
}
/*
 * Gorselli baslikta her sey beyaz.
 *
 * Sayfa yolundaki "bulundugunuz sayfa" yazisi asagidaki
 * ".breadcrumb span[aria-current]" kuralindan --ink aliyordu;
 * ozgulluk esit oldugu icin sonraki kural kazaniyor ve acik
 * temada koyu yazi, koyu gorselin uzerinde okunmuyordu. Koyu
 * temada ayni yazi beyaza donuyordu — iki tema arasindaki
 * uyumsuzluk buradan geliyordu. Listeye o secici de eklendi.
 */
.page-hero--image .page-hero__title,
.page-hero--image .page-hero__subtitle,
.page-hero--image .breadcrumb,
.page-hero--image .breadcrumb a,
.page-hero--image .breadcrumb span,
.page-hero--image .breadcrumb span[aria-current] { color: #fff; }

/* Gecilebilir baglantilar biraz daha parlak, bulunulan sayfa soluk */
.page-hero--image .breadcrumb a { opacity: .88; }
.page-hero--image .breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.page-hero--image .breadcrumb span[aria-current] { opacity: 1; font-weight: 600; }

.page-hero__title { margin: 0 0 6px; }
.page-hero__subtitle { margin: 0; color: var(--muted); font-size: 1.02rem; max-width: 70ch; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: .85rem;
    color: var(--muted);
}
.breadcrumb a { color: var(--brand); }
.breadcrumb span[aria-current] { color: var(--ink); }

/* -------------------------------------------------- Yan sütunlu düzen */
.layout-with-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.layout-main { min-width: 0; }
.layout-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }

.widget {
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.widget--muted { background: var(--bg-alt); }
.widget__title {
    margin: 0 0 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.widget__text { margin: 0; font-size: .92rem; color: var(--muted); }
.widget__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.widget__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-size: .93rem;
}
.widget__list a:hover { background: var(--brand-soft); color: var(--brand); }
.widget__list a.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.widget__count {
    min-width: 24px;
    padding: 1px 7px;
    font-size: .76rem;
    text-align: center;
    color: var(--muted);
    background: var(--bg-alt);
    border-radius: 999px;
}
.widget__list a.is-active .widget__count { background: rgba(255, 255, 255, .25); color: #fff; }

.info-list { margin: 0; display: grid; gap: 12px; }
.info-list > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: .92rem; }
.info-list dt { color: var(--muted); }
.info-list dd { margin: 0; color: var(--ink); }

.mini-stats { display: flex; flex-wrap: wrap; gap: 18px; }
.mini-stats > div { display: grid; }
.mini-stats strong { font-family: var(--font-head); font-size: 1.5rem; color: var(--brand); line-height: 1.1; }
.mini-stats span { font-size: .84rem; color: var(--muted); }
.mini-stats--cards {
    gap: 12px;
    margin-bottom: 32px;
}
.mini-stats--cards > div {
    flex: 1 1 140px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

/* -------------------------------------------------------- Filtre çubuğu */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.filter-bar__item {
    padding: 8px 18px;
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--bg-alt);
    border: 1px solid transparent;
    border-radius: 999px;
}
.filter-bar__item:hover { border-color: var(--brand); color: var(--brand); }
.filter-bar__item.is-active { background: var(--brand); color: #fff; }

.empty-state {
    padding: 44px 20px;
    text-align: center;
    color: var(--muted);
    background: var(--bg-alt);
    border-radius: var(--radius);
}
.empty-state--lg { padding: 70px 20px; display: grid; gap: 18px; justify-items: center; }

.chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--chip, var(--brand));
    background: color-mix(in srgb, var(--chip, var(--brand)) 12%, transparent);
    border-radius: 999px;
}
.chip:hover { color: #fff; background: var(--chip, var(--brand)); }

/* ------------------------------------------------------------- Makale */
.article { max-width: 820px; margin-inline: auto; }
.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: .88rem;
    color: var(--muted);
}
.article__reading::before { content: '· '; }
.article__cover { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; }
.article__cover img { width: 100%; height: auto; }
.article__lead {
    margin: 0 0 22px;
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--ink);
    font-weight: 500;
}

.prose { font-size: 1.02rem; line-height: 1.8; color: var(--ink-soft); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 1.8em 0 .6em; font-size: 1.5rem; }
.prose h3 { margin: 1.5em 0 .5em; font-size: 1.2rem; }
.prose p { margin: 0 0 1.1em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--radius); margin: 1.2em 0; }
.prose figure { margin: 1.5em 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-inline-start: 3px solid var(--brand);
    color: var(--ink);
    font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .94rem; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: start; }
.prose th { background: var(--bg-alt); }
.prose iframe { max-width: 100%; border-radius: var(--radius); }

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .88rem;
}
.share__label { font-weight: 600; color: var(--ink); }


.event-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 26px;
    padding: 22px;
    background: var(--bg-alt);
    border-radius: var(--radius);
}
.event-stat { display: grid; gap: 2px; }
.event-stat strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--brand); }
.event-stat span { font-size: .88rem; color: var(--muted); }
.event-stat--progress { flex: 1 1 260px; align-content: center; }

.progress {
    display: block;
    height: 10px;
    margin-bottom: 8px;
    background: var(--line);
    border-radius: 999px;
    overflow: hidden;
}
.progress__bar { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

.inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 36px 0;
    padding: 24px;
    background: var(--brand-soft);
    border-radius: var(--radius);
}
.inline-cta p { margin: 0; font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------- Temsilcilik */
.branch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.branch-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.branch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.branch-card__plate {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
}
.branch-card__body { display: grid; gap: 2px; font-size: .92rem; }
.branch-card__body strong { font-size: .98rem; }
.branch-card__meta { color: var(--muted); font-size: .84rem; }

/* --------------------------------------------------------- Mağaza */
.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}
.shop-toolbar__count { margin: 0; color: var(--muted); font-size: .92rem; }
.shop-toolbar select {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: .9rem;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.product-detail__main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.product-detail__main img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-detail__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb {
    width: 68px; height: 68px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    overflow: hidden;
}
.thumb.is-active { border-color: var(--brand); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.product-detail__title { margin: 0 0 12px; font-size: clamp(1.4rem, 3vw, 2rem); }
.product-detail__price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; }
.product-detail__price strong { font-family: var(--font-head); font-size: 1.9rem; color: var(--brand); }
.product-detail__price s { color: var(--muted); font-size: 1.1rem; }
.product-detail__summary { color: var(--muted); margin-bottom: 18px; }
.product-detail__stock { font-size: .92rem; font-weight: 600; margin-bottom: 20px; }
.product-detail__stock.is-in { color: var(--ok); }
.product-detail__stock.is-out { color: var(--err); }
.product-detail__buy { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.product-detail__meta { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.product-detail__meta li { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.product-detail__meta span { color: var(--muted); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty__btn { width: 42px; height: 46px; border: 0; background: var(--bg-alt); font-size: 1.15rem; cursor: pointer; color: var(--ink); }
.qty__btn:hover { background: var(--brand); color: #fff; }
.qty input { width: 56px; height: 46px; border: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm input { width: 52px; height: 38px; }

/* ------------------------------------------------------------ Sepet */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.cart-items { display: grid; gap: 12px; }
.cart-item {
    display: grid;
    grid-template-columns: 90px 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.cart-item__media img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item__title { margin: 0 0 4px; font-size: 1rem; }
.cart-item__title a { color: var(--ink); }
.cart-item__unit { margin: 0; font-size: .86rem; color: var(--muted); }
.cart-item__total { margin: 0; font-family: var(--font-head); font-weight: 600; white-space: nowrap; }
.cart-item__remove { width: 34px; height: 34px; border: 0; background: var(--bg-alt); border-radius: 50%; font-size: 1.2rem; color: var(--muted); cursor: pointer; }
.cart-item__remove:hover { background: var(--err); color: #fff; }

.cart-summary, .checkout__summary {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 14px;
}
.cart-summary__title { margin: 0; font-size: 1.1rem; }
.cart-summary__note { margin: 0; font-size: .84rem; color: var(--muted); }

.summary-list { margin: 0; display: grid; gap: 10px; }
.summary-list > div { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 600; }
.summary-list .is-negative { color: var(--ok); }
.summary-list__total { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.1rem !important; }
.summary-list__total dt { color: var(--ink) !important; font-weight: 600; }
.summary-list__total dd { font-family: var(--font-head); color: var(--brand); }
.summary-tax { margin: -6px 0 0; font-size: .8rem; color: var(--muted); }

.summary-items { list-style: none; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.summary-items li { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.summary-items em { color: var(--muted); font-style: normal; }

/* ------------------------------------------------------------ Ödeme */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.checkout__main { display: grid; gap: 20px; }
.checkout__block {
    margin: 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.checkout__block legend {
    padding: 0 8px;
    margin-inline-start: -8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
}

.option-list { display: grid; gap: 10px; }
.option-list--inline { grid-auto-flow: column; grid-auto-columns: 1fr; }
.option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.option:hover { border-color: var(--brand); }
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.option input { accent-color: var(--brand); width: 18px; height: 18px; flex: 0 0 auto; }
.option__body { display: grid; gap: 2px; flex: 1; font-size: .94rem; }
.option__body span { color: var(--muted); font-size: .85rem; }
.option__price { font-family: var(--font-head); font-weight: 600; white-space: nowrap; }

.card-form { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.card-form__note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }

.bank-info { margin-top: 18px; display: grid; gap: 12px; }
.bank-info > p { margin: 0; font-size: .92rem; color: var(--muted); }
.bank-row {
    display: grid;
    gap: 3px;
    padding: 14px 16px;
    background: var(--bg-alt);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}
.bank-row code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--ink);
    cursor: pointer;
}

.notice {
    padding: 14px 18px;
    background: var(--brand-soft);
    border-inline-start: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    font-size: .92rem;
}
.notice--warn { background: #fff7ed; border-color: var(--warn); }

/* ------------------------------------------------------- Sonuç sayfası */
.result { text-align: center; }
.result__icon {
    display: grid;
    place-items: center;
    width: 78px; height: 78px;
    margin: 0 auto 20px;
    font-size: 2.1rem;
    color: #fff;
    border-radius: 50%;
}
.result__icon--ok { background: var(--ok); }
.result__icon--wait { background: var(--warn); }
.result__icon--fail { background: var(--err); }
.result__title { margin: 0 0 10px; }
.result__no { margin: 0 0 6px; color: var(--muted); }
.result__amount { margin: 0 0 18px; font-family: var(--font-head); font-size: 2rem; color: var(--brand); }
.result__text { max-width: 56ch; margin-inline: auto; color: var(--muted); }
.result__box { margin: 28px 0; padding: 24px; text-align: start; background: var(--bg-alt); border-radius: var(--radius); display: grid; gap: 12px; }
.result__box h2 { margin: 0; font-size: 1.1rem; }
.result__items { max-width: 460px; margin: 28px auto; text-align: start; display: grid; gap: 8px; }
.result__item { display: flex; justify-content: space-between; gap: 12px; font-size: .94rem; }
.result__item em { color: var(--muted); font-style: normal; }
.result__item--total { padding-top: 10px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.result__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------ Formlar */
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/*
 * Yan yana duran alanlar hizalı kalsın: biri ipucu/hata satırı
 * taşıyınca ötekinin kutusu aşağı kaymasın.
 */
.form__row { display: grid; gap: 6px; align-content: start; }
.form__row--wide { grid-column: 1 / -1; }
.form__honeypot { position: absolute; left: -9999px; }

.form__label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.form__label small { font-weight: 400; color: var(--muted); }

.form input[type="text"], .form input[type="email"], .form input[type="tel"],
.form input[type="password"], .form input[type="number"], .form input[type="date"],
.form select, .form textarea,
.checkout input[type="text"], .checkout input[type="email"], .checkout input[type="tel"],
.checkout input[type="number"], .checkout select, .checkout textarea,
.auth-card input, .auth-card select,
.account-main input[type="text"], .account-main input[type="email"], .account-main input[type="tel"],
.account-main input[type="password"], .account-main input[type="date"],
.account-main select, .account-main textarea,
.donation-form input[type="text"], .donation-form input[type="email"],
.donation-form input[type="tel"], .donation-form input[type="number"], .donation-form textarea {
    width: 100%;
    padding: 12px 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus,
.checkout input:focus, .checkout select:focus, .checkout textarea:focus,
.auth-card input:focus, .auth-card select:focus,
.account-main input:focus, .account-main select:focus, .account-main textarea:focus,
.donation-form input:focus, .donation-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
input:disabled { background: var(--bg-alt); color: var(--muted); cursor: not-allowed; }

.has-error input, .has-error select, .has-error textarea { border-color: var(--err); }
.form__error { margin: 0; font-size: .82rem; color: var(--err); }
.form__hint { margin: 0; font-size: .82rem; color: var(--muted); }

.form__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0;
    font-size: .92rem;
    cursor: pointer;
}
.form__check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.form__check.has-error span { color: var(--err); }

.input-group { display: flex; }
.input-group input { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
.input-group__btn {
    padding: 0 16px;
    font-size: .85rem;
    color: var(--muted);
    background: var(--bg-alt);
    border: 1.5px solid var(--line);
    border-inline-start: 0;
    border-start-end-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
    cursor: pointer;
}
.input-group__btn:hover { color: var(--brand); }

.contact-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 36px; margin-top: 44px; }
.contact-map iframe { width: 100%; min-height: 340px; border: 0; border-radius: var(--radius); }

/* ------------------------------------------------------- Giriş / kayıt */
.auth-section { background: var(--bg-alt); }
.auth-wrap { display: grid; place-items: center; }
.auth-wrap--wide .auth-card { max-width: 620px; }
.auth-cover { display: none; }
.auth-card {
    width: 100%;
    max-width: 430px;
    padding: clamp(26px, 4vw, 40px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.auth-card__title { margin: 0 0 8px; font-size: 1.5rem; }
.auth-card__text { margin: 0 0 22px; color: var(--muted); font-size: .94rem; }
.auth-card .form__row { margin-bottom: 16px; }
.auth-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; font-size: .9rem; }
.auth-card__row .form__check { margin: 0; }
.auth-card__foot { margin: 20px 0 0; text-align: center; font-size: .92rem; color: var(--muted); }

/* ---------------------------------------------------------- Hesabım */
.account-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
.account-nav {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.account-nav ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.account-nav a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .93rem; }
.account-nav a:hover { background: var(--brand-soft); color: var(--brand); }
.account-nav a.is-active { background: var(--brand); color: #fff; font-weight: 600; }
.account-main__title { margin: 34px 0 16px; font-size: 1.2rem; }
.account-main__title:first-child { margin-top: 0; }

.order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 22px; font-size: .92rem; color: var(--muted); }
.order-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.order-grid p { margin: 0; font-size: .92rem; line-height: 1.7; }

.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 34px; }
.address-card { position: relative; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.address-card h2 { margin: 0 0 10px; font-size: 1rem; }
.address-card p { font-size: .9rem; line-height: 1.7; color: var(--muted); }
.address-card__badge { position: absolute; top: 14px; right: 14px; padding: 3px 10px; font-size: .72rem; font-weight: 600; color: #fff; background: var(--ok); border-radius: 999px; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-inline-start: 2px solid var(--line); display: grid; gap: 20px; }
.timeline li { position: relative; display: grid; gap: 3px; font-size: .92rem; }
.timeline li::before { content: ''; position: absolute; left: -28px; top: 6px; width: 10px; height: 10px; background: var(--brand); border-radius: 50%; }
.timeline__date { font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------ Tablolar */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.data-table th, .data-table td { padding: 13px 16px; text-align: start; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--bg-alt); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tfoot th, .data-table tfoot td { background: var(--bg-alt); font-weight: 600; }
.data-table tfoot .is-total td, .data-table tfoot .is-total th { font-size: 1.05rem; color: var(--brand); }

.status { display: inline-block; padding: 4px 12px; font-size: .78rem; font-weight: 600; border-radius: 999px; background: var(--bg-alt); color: var(--ink-soft); white-space: nowrap; }
.status--odendi, .status--tamamlandi, .status--tamamlandi { background: #e6f5ef; color: var(--ok); }
.status--beklemede, .status--bekliyor, .status--hazirlaniyor { background: #fff4e5; color: var(--warn); }
.status--kargoda { background: #e7f0ff; color: var(--info); }
.status--iptal, .status--basarisiz, .status--iade { background: #fdecec; color: var(--err); }

/* ------------------------------------------------------------- Bağış */
.donation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.donation-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.donation-form { margin-top: 30px; display: grid; gap: 20px; }
.donation-form__block { margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.donation-form__block legend { padding: 0 8px; margin-inline-start: -8px; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--ink); }

.amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 18px; }
.amount { position: relative; }
.amount input { position: absolute; opacity: 0; width: 0; height: 0; }
.amount span {
    display: grid;
    place-items: center;
    padding: 15px 10px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    background: var(--bg-alt);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all .18s var(--ease);
}
.amount span:hover { border-color: var(--brand); }
.amount input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.amount input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }

.campaign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.campaign-list a { display: grid; gap: 6px; color: var(--ink); font-size: .93rem; }
.campaign-list a:hover strong { color: var(--brand); }
.campaign-list__meta { font-size: .82rem; color: var(--muted); }

.campaign-progress { margin-bottom: 28px; }
.campaign-progress__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .9rem; color: var(--muted); }
.campaign-progress__meta strong { color: var(--brand); font-family: var(--font-head); }

/* ============================== MOBİL ============================== */
@media (max-width: 980px) {
    .layout-with-aside,
    .cart-layout,
    .checkout,
    .account-layout,
    .donation-layout { grid-template-columns: 1fr; }

    .layout-aside, .account-nav, .cart-summary,
    .checkout__summary, .donation-aside { position: static; }

    .product-detail { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .form__grid { grid-template-columns: 1fr; }
    .option-list--inline { grid-auto-flow: row; }

    .cart-item {
        grid-template-columns: 70px 1fr auto;
        grid-template-areas: "media body remove" "media qty total";
        row-gap: 10px;
    }
    .cart-item__media { grid-area: media; }
    .cart-item__media img { width: 70px; height: 70px; }
    .cart-item__body { grid-area: body; }
    .cart-item .qty { grid-area: qty; }
    .cart-item__total { grid-area: total; }
    .cart-item__remove { grid-area: remove; }

    /* Tabloları karta dönüştür */
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr { padding: 12px 4px; border-bottom: 1px solid var(--line); }
    .data-table td { display: flex; justify-content: space-between; gap: 14px; padding: 7px 14px; border: 0; text-align: end; }
    .data-table td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: start; }
    .data-table tfoot { display: block; }
    .data-table tfoot tr { display: flex; justify-content: space-between; padding: 10px 14px; }

    .event-stats { gap: 18px; padding: 18px; }
    .mini-stats--cards > div { flex-basis: 100%; }
}

/* ==========================================================================
   KOYU TEMA
   Üç durum vardır:
     • data-theme yok  → ziyaretçinin işletim sistemi tercihi geçerli
     • data-theme="dark"  → kullanıcı koyu temayı seçti
     • data-theme="light" → kullanıcı açık temayı seçti
   Renk değişkenleri tek yerde tanımlanır, iki seçici de aynı bloğu kullanır.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink:        #eef1f6;
        --ink-soft:   #c3cbd9;
        --muted:      #8b95a8;
        --line:       #2a3348;

        --bg:         #10141f;
        --bg-alt:     #161c29;
        --surface:    #171e2c;
        --surface-2:  #1d2534;

        --brand-soft: rgba(255, 6, 6, .14);

        --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
        --shadow:     0 4px 12px rgba(0, 0, 0, .45);
        --shadow-lg:  0 12px 28px rgba(0, 0, 0, .55);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --ink:        #eef1f6;
    --ink-soft:   #c3cbd9;
    --muted:      #8b95a8;
    --line:       #2a3348;

    --bg:         #10141f;
    --bg-alt:     #161c29;
    --surface:    #171e2c;
    --surface-2:  #1d2534;

    --brand-soft: rgba(255, 6, 6, .14);

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow:     0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg:  0 12px 28px rgba(0, 0, 0, .55);
}

:root[data-theme="light"] { color-scheme: light; }

/* Koyu temada bileşen düzeltmeleri — her iki seçici için de geçerli */
@media (prefers-color-scheme: dark) {
    /*
     * Gorselli baslik bandi disarida birakilir: "background"
     * kisayolu arka plan gorselini de siliyor, koyu temada
     * sayfa basliklari duz zemin kaliyordu.
     */
    :root:not([data-theme="light"]) .page-hero:not(.page-hero--image),
    :root:not([data-theme="light"]) .section--alt { background: var(--bg-alt); }
    :root:not([data-theme="light"]) .tr-map__svg { stroke: var(--bg); }
    :root:not([data-theme="light"]) input,
    :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) textarea { background: var(--surface-2); color: var(--ink); }
    :root:not([data-theme="light"]) .submenu,
    :root:not([data-theme="light"]) .header-search { background: var(--surface); }
    :root:not([data-theme="light"]) .card__media img,
    :root:not([data-theme="light"]) .product-card__media img { filter: brightness(.94); }
}

:root[data-theme="dark"] .page-hero:not(.page-hero--image),
:root[data-theme="dark"] .section--alt { background: var(--bg-alt); }
:root[data-theme="dark"] .tr-map__svg { stroke: var(--bg); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .submenu,
:root[data-theme="dark"] .header-search { background: var(--surface); }
:root[data-theme="dark"] .card__media img,
:root[data-theme="dark"] .product-card__media img { filter: brightness(.94); }

.tr-map__tooltip { background: var(--surface); }
.legend-swatch { border-color: var(--line); }
.qty__btn { background: var(--surface-2); }
.shop-toolbar select { background: var(--surface-2); }


/* Sabitlenmiş harita baloncuğu — bağlantılara tıklanabilsin */
.tr-map__tooltip.is-pinned {
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--brand);
}
.tr-map__path { outline: none; }
.tr-map__path:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* -------------------------------------------------- Temsilcilik ofisleri */
.office-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.office-card {
    display: grid;
    gap: 10px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.office-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.office-card__head { display: flex; align-items: flex-start; gap: 12px; }
.office-card__plate {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
}
.office-card__name { margin: 0 0 2px; font-size: 1rem; }
.office-card__name a { color: var(--ink); }
.office-card__name a:hover { color: var(--brand); }
.office-card__type {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.office-card__address { margin: 0; font-size: .89rem; color: var(--muted); line-height: 1.6; }
.office-card__contact { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; font-size: .88rem; }

.office-list { display: grid; gap: 16px; }
.office-list__item { display: grid; gap: 3px; font-size: .9rem; color: var(--muted); }
.office-list__item strong { color: var(--ink); font-size: .96rem; }
.office-list__type {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand);
}

/* Baloncuk ile il arasındaki boşluğu kapatan görünmez köprü —
   imleç baloncuğa giderken araya başka il girmesin */
.tr-map__tooltip::before {
    content: '';
    position: absolute;
    left: -16px;
    right: -16px;
    top: -16px;
    bottom: -20px;
    z-index: -1;
}

/* ==========================================================================
   KARUSEL — tek satır içerik şeridi
   Bölüm ekrana girdiğinde kartlar sırayla kayarak belirir.
   ========================================================================== */
.carousel { position: relative; }

.carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    cursor: grab;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.carousel__viewport:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }

.carousel__track {
    display: flex;
    gap: var(--gap);
    width: max-content;
    padding: 6px 2px 10px;
}

.carousel__item { flex: 0 0 auto; }
.carousel__track--card    .carousel__item { width: 320px; }
.carousel__track--product .carousel__item { width: 230px; }
.carousel__item > .card,
.carousel__item > .product-card { height: 100%; }

/* --- Giriş animasyonu: sağdan kayarak belirme, kart kart gecikmeli ---
   Gizleme yalnızca JavaScript çalışıyorken uygulanır (html.js). Betik
   çalışmazsa kartlar olağan biçimde görünür; içerik hiçbir koşulda
   gizli kalmaz. */
html.js .carousel--animate .carousel__item {
    opacity: 0;
    transform: translateX(48px);
}
html.js .carousel--animate.is-visible .carousel__item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    /* Her kart bir öncekinden 90 ms sonra girer; en fazla 10 kart geciktirilir */
    transition-delay: calc(min(var(--i), 10) * 90ms);
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: var(--shadow);
    transition: background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.carousel__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.carousel__arrow:disabled { opacity: .35; cursor: default; }
.carousel__arrow:disabled:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.carousel__arrow--prev { inset-inline-start: -8px; }
.carousel__arrow--next { inset-inline-end: -8px; }

@media (hover: none) {
    .carousel__arrow { display: none; }
}

/* Hareket azaltma tercihinde kartlar doğrudan görünür */
@media (prefers-reduced-motion: reduce) {
    html.js .carousel--animate .carousel__item { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- Bölüm yardımcı stilleri */
.section--dark    { background: var(--bg-dark); color: rgba(255, 255, 255, .82); }
.section--dark .section__title, .section--dark h2, .section--dark h3 { color: #fff; }
.section--brandbg { background: var(--brand); color: #fff; }
.section--brandbg .section__title { color: #fff; }

.section-spacer { position: relative; }
.section-divider { margin: 0; border: 0; border-top: 1px solid var(--line); }

.section-image { margin: 0; }
.section-image img { width: 100%; height: auto; border-radius: var(--radius); }
.section-image figcaption { margin-top: 10px; text-align: center; font-size: .88rem; color: var(--muted); }
.section-image--full .section-image img { border-radius: 0; }

.section-embed iframe,
.section-embed video { width: 100%; min-height: 320px; border: 0; border-radius: var(--radius); }

.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Cihaz görünürlüğü — yalnızca gizler, öğenin kendi display değerini bozmaz */
@media (max-width: 1400px) { .is-desktop-only { display: none !important; } }
@media (min-width: 1401px) { .is-mobile-only  { display: none !important; } }

/* Şeritteki etiket ve dış bağlantı işareti */
.ticker__tag {
    padding: 2px 9px;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    white-space: nowrap;
}
.ticker__ext { opacity: .7; font-size: .8rem; }
.ticker__item span:not(:last-child) { margin-inline-end: 2px; }

@media (max-width: 640px) {
    /* Şeritte de iki kart aynı anda görünsün */
    .carousel__track--card    .carousel__item { width: 46vw; max-width: 240px; }
    .carousel__track--product .carousel__item { width: 42vw; max-width: 180px; }
    .carousel__arrow--prev { inset-inline-start: -4px; }
    .carousel__arrow--next { inset-inline-end: -4px; }
}

/* ==========================================================================
   LOGO ZEMİNİ
   Logo hem açık hem koyu zeminde okunaklı kalsın diye kendi zeminini taşır.
   ========================================================================== */
.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 8px 0;
}
.brand img { height: 100%; width: auto; max-height: none; object-fit: contain; }

/* ==========================================================================
   SOSYAL MEDYA RAYI — sağda yapışkan, açılıp kapanabilir
   ========================================================================== */
.social-rail {
    position: fixed;
    inset-inline-end: 0;
    top: 50%;
    /* Sabit başlığın (100) üstünde: aşağı kayarken altına giriyordu */
    z-index: 110;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.social-rail__toggle {
    display: grid;
    place-items: center;
    width: 30px;
    height: 62px;
    padding: 0;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background .18s var(--ease);
}
.social-rail__toggle:hover { background: var(--brand-dark); }
.social-rail__toggle svg { transition: transform .28s var(--ease); }
.social-rail.is-open .social-rail__toggle svg { transform: rotate(180deg); }

.social-rail__panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-end: 0;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    box-shadow: var(--shadow-lg);

    /* Kapalıyken genişliği sıfırlanır; açılış yumuşak olur */
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: width .3s var(--ease), opacity .25s var(--ease), visibility .3s;
}
.social-rail.is-open .social-rail__panel {
    width: 52px;
    opacity: 1;
    visibility: visible;
}

.social-rail__panel a,
.social-rail__theme {
    display: grid;
    place-items: center;
    width: 52px;
    height: 46px;
    flex: 0 0 auto;
    padding: 0;
    color: var(--ink-soft);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.social-rail__panel a:last-child { border-bottom: 0; }
.social-rail__panel a:hover { background: var(--brand); color: #fff; }

/* Tema düğmesi rayın başında durur */
.social-rail__theme {
    color: var(--brand);
    background: var(--brand-soft);
    border-bottom: 1px solid var(--line);
}
.social-rail__theme:hover { background: var(--brand); color: #fff; }
.social-rail__theme .theme-icon--sun  { display: none; }
:root[data-theme="dark"] .social-rail__theme .theme-icon--sun  { display: block; }
:root[data-theme="dark"] .social-rail__theme .theme-icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .social-rail__theme .theme-icon--sun  { display: block; }
    :root:not([data-theme="light"]) .social-rail__theme .theme-icon--moon { display: none; }
}

@media (max-width: 980px) {
    /* Konum yukarida, mobil yerlesim bolumunde belirlenir */
    .social-rail__toggle { width: 34px; height: 56px; }
    .social-rail.is-open .social-rail__panel { width: 48px; }
    .social-rail__panel a, .social-rail__theme { width: 48px; height: 44px; }
}

/* ==========================================================================
   ALT BİLGİ SOSYAL MEDYA
   ========================================================================== */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.footer-social a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    /* Sosyal düğmelerin dört rengi de yönetimden değiştirilebilir */
    color: var(--social-fg, rgba(255, 255, 255, .8));
    background: var(--social-bg, rgba(255, 255, 255, .08));
    border-radius: 50%;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.footer-social a:hover {
    background: var(--social-hover-bg, var(--brand));
    color: var(--social-hover-fg, #fff);
    transform: translateY(-2px);
}

/* ==========================================================================
   PAYLAŞ DÜĞMELERİ
   ========================================================================== */
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.share__label {
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    margin-inline-end: 4px;
}
.share__btn {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    padding: 0;
    color: var(--ink-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.share__btn:hover { color: #fff; transform: translateY(-2px); border-color: transparent; }
.share__btn--facebook:hover  { background: #1877F2; }
.share__btn--x:hover         { background: #000; }
.share__btn--whatsapp:hover  { background: #25D366; }
.share__btn--linkedin:hover  { background: #0A66C2; }
.share__btn--telegram:hover  { background: #26A5E4; }
.share__btn--email:hover     { background: var(--ink); }
.share__btn--copy:hover      { background: var(--brand); }
.share__btn--instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.share__btn.is-copied { background: var(--ok); color: #fff; border-color: transparent; }

/* Çağrı bloğundaki logo */
.cta__logo {
    /* Kaynak 668x237; en-boy oranı korunarak büyütülür, bozulma olmaz */
    width: min(420px, 78vw);
    height: auto;
    margin: 0 auto 24px;
    /* Kırmızı zemin üzerinde beyaz görünsün */
    filter: brightness(0) invert(1);
    opacity: .96;
}
@media (max-width: 640px) {
    .cta__logo { width: min(300px, 80vw); margin-bottom: 18px; }
}

/* ==========================================================================
   BANKA BİLGİLERİ VE BAĞIŞ TÜRLERİ
   ========================================================================== */
.iban-group {
    margin: 32px 0;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.iban-group__title { margin: 0 0 12px; font-size: 1.15rem; }
.iban-group__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin-bottom: 18px;
    font-size: .92rem;
    color: var(--muted);
}
.iban-group__meta strong { color: var(--ink); font-weight: 600; }

.iban-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.iban-row { display: flex; align-items: stretch; gap: 10px; }
.iban-row__currency {
    display: grid;
    place-items: center;
    width: 52px;
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .82rem;
    color: #fff;
    background: var(--brand);
    border-radius: var(--radius-sm);
}
.iban-row__value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .98rem;
    letter-spacing: .04em;
    text-align: start;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.iban-row__value:hover { border-color: var(--brand); }
.iban-row__value.is-copied { background: #e6f5ef; border-color: var(--ok); color: var(--ok); }
.iban-row__hint {
    font-family: var(--font-body);
    font-size: .74rem;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
}
.iban-note { margin-top: 18px; font-size: .88rem; color: var(--muted); text-align: center; }

.donation-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.donation-type {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 26px 20px;
    text-align: center;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.donation-type:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand); color: var(--ink); }
.donation-type__badge { width: 118px; height: auto; }
.donation-type__body { display: grid; gap: 4px; }
.donation-type__body strong { font-family: var(--font-head); font-size: 1rem; }
.donation-type__body span { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.donation-type__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 9px 20px;
    font-family: var(--font-head);
    font-size: .84rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.donation-type:hover .donation-type__action { background: var(--brand-dark); }
.donation-type__action em { font-style: normal; }

@media (max-width: 640px) {
    .iban-row { flex-direction: column; }
    .iban-row__currency { width: auto; padding: 4px 0; }
    .iban-row__value { font-size: .88rem; }
}

/* Dış bağış platformuna yönlendirme ekranı */
.donate-cta {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: clamp(28px, 5vw, 44px);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.donate-cta__badge { width: 130px; height: auto; }
.donate-cta__title { margin: 0; font-size: clamp(1.25rem, 3vw, 1.7rem); }
.donate-cta__note { margin: 0; max-width: 52ch; color: var(--muted); font-size: .94rem; }
.donate-cta__host { margin: 0; font-size: .82rem; color: var(--muted); }
.donate-cta__host code {
    padding: 2px 8px;
    background: var(--surface-2);
    border-radius: 4px;
    font-size: .95em;
}

.donate-alt { margin-top: 40px; }
.donate-alt__title { margin: 0 0 8px; font-size: 1.15rem; }
.donate-alt__text { margin: 0 0 18px; color: var(--muted); font-size: .93rem; }

/* ==========================================================================
   BAŞLIK — logo, bağış butonu, menü kabuğu
   ========================================================================== */
.site-header.is-sticky { position: sticky; top: 0; }
.site-header:not(.is-sticky) { position: relative; }

/*
 * Başlık, sayfa gövdesinden daha geniş bir şeride oturur: logo sola
 * yaslanır, menü tüm genişliği kullanır, sağdaki araçlar sıkışmaz.
 */
.site-header__inner {
    width: min(100% - 2 * clamp(16px, 3vw, 34px), 1560px);
}

.brand__box img { height: 100%; width: auto; object-fit: contain; }

/*
 * Bağış düğmesi simgelerle aynı hizada dursun: simgeler 46 px
 * yüksekliğinde, düğme 37 px kalınca sırıtıyordu.
 */
.header-donate {
    white-space: nowrap;
    margin-inline-start: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-inline: 22px;
}

/* Menü içi başlık ve alt bölüm yalnızca mobilde görünür */
.main-nav__head, .main-nav__foot { display: none; }
.main-nav__caret { display: none; }

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(10, 14, 24, .6);
    backdrop-filter: blur(2px);
}

/* ==========================================================================
   MOBİL BAŞLIK VE MENÜ
   ========================================================================== */
@media (max-width: 1400px) {
    :root { --header-h: 64px; }

    .site-header__inner { gap: 10px; }

    /* Logo mobilde de görünür; yalnızca küçülür */
    .brand { height: var(--header-h); padding: 7px 0; }
    .brand img { height: 100%; max-width: 148px; }

    .burger { display: flex; margin-inline-start: 4px; }
    .header-tools { gap: 6px; }
    .icon-btn { width: 44px; height: 44px; }
    .burger { width: 44px; height: 44px; }

    /* --- Kayan menü paneli --- */
    .main-nav {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 99;
        /*
         * Panel telefonda yarım duruyordu: 88vw dar kalıyor ve
         * madde yazıları sığmayınca menü kırpılmış görünüyordu.
         */
        width: min(360px, 92vw);
        margin: 0;
        display: flex;
        flex-direction: column;
        background: var(--bg-dark);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .3s var(--ease);
    }
    .main-nav.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }

    .main-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 18px;
        height: var(--header-h);
        flex: 0 0 auto;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .main-nav__title {
        font-family: var(--font-head);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .5);
    }
    .main-nav__close {
        width: 36px; height: 36px;
        font-size: 1.7rem;
        line-height: 1;
        color: #fff;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .main-nav__list {
        flex: 1;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 12px;
    }
    .main-nav__item { width: 100%; }

    .main-nav__link {
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 14px 14px 14px 12px;
        font-size: .92rem;
        letter-spacing: .02em;
        border-radius: var(--radius-sm);
    }
    .main-nav__link::after { display: none; }
    .main-nav__link:hover,
    .main-nav__link.active { background: rgba(255, 255, 255, .08); }

    /* Bağış butonu menüde vurgulu durur */
    .main-nav__link.btn-bagis {
        margin: 10px 0;
        justify-content: center;
        background: var(--brand);
    }

    /* Alt menü açma düğmesi — bağlantıya basmadan açılır */
    .main-nav__caret {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 34px; height: 34px;
        /* Ok sağ kenara yaslanır; yazı ile arasında boşluk kalmaz */
        margin: -8px 0 -8px auto;
        color: rgba(255, 255, 255, .6);
        background: rgba(255, 255, 255, .06);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: transform .25s var(--ease), background .18s var(--ease);
    }
    .main-nav__caret:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    .main-nav__item.is-open .main-nav__caret { transform: rotate(180deg); }

    /* Açılır alt menü.
       grid-template-rows tekniği tek bir sarmalayıcı çocuk ister; burada
       birden çok <li> olduğu için max-height kullanılıyor. Böylece hiçbir
       madde kırpılmaz. */
    .submenu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0;
        margin: 0 0 0 12px;
        background: transparent;
        box-shadow: none;
        border-inline-start: 1px solid rgba(255, 255, 255, .12);
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s var(--ease);
    }
    .main-nav__item.is-open > .submenu { max-height: 520px; }
    .submenu li:first-child { padding-top: 6px; }
    .submenu li:last-child  { padding-bottom: 10px; }
    .submenu a {
        padding: 11px 14px;
        font-size: .88rem;
        color: rgba(255, 255, 255, .72);
        border-radius: var(--radius-sm);
    }
    .submenu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

    .main-nav__foot {
        display: grid;
        gap: 8px;
        padding: 16px 18px 24px;
        flex: 0 0 auto;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .main-nav__foot .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.25); }
    .main-nav__foot .btn--ghost:hover { --btn-bg: rgba(255,255,255,.1); --btn-fg: #fff; }

    /* --- Diğer mobil düzeltmeler --- */
    .hero { height: var(--hero-h-mobile, 460px); }
    .hero__overlay { background: linear-gradient(180deg, rgba(20, 28, 47, .55) 0%, rgba(20, 28, 47, .85) 100%); }
    .hero__content { max-width: none; text-align: center; }
    .hero__actions { justify-content: center; }
    .hero__arrow { width: 40px; height: 40px; font-size: 1.5rem; }

    .section__head--row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    .brand img { max-width: 124px; }
}

/* ==========================================================================
   İLETİŞİM SAYFASI
   ========================================================================== */
.contact-intro { max-width: 70ch; margin-bottom: 36px; }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
}
.contact-info__title { margin: 0 0 20px; font-size: 1.25rem; }

.contact-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.contact-list li { display: flex; gap: 14px; }
.contact-list__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
}
.contact-list__body { display: grid; gap: 3px; font-size: .94rem; }
.contact-list__body strong { font-family: var(--font-head); font-size: .82rem; color: var(--muted); font-weight: 600; }
.contact-list__body a { color: var(--ink); }
.contact-list__body a:hover { color: var(--brand); }

.contact-social { padding-top: 22px; border-top: 1px solid var(--line); }
.contact-social__label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.contact-social__links { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-social__links a {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    color: var(--ink-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.contact-social__links a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.contact-form-wrap {
    padding: clamp(22px, 4vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* İletişim haritası: sayfanın altına yapışan ham iframe yerine kart */
.contact-map-card {
    line-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.contact-map-card iframe {
    display: block;
    width: 100%;
    height: clamp(280px, 38vw, 440px);
    border: 0;
}
.contact-map-actions { margin: 20px 0 0; text-align: center; }
.contact-map-actions .btn { gap: 7px; }

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ALT BİLGİ ŞERİDİ — uygulama rozetleri, ödeme işaretleri, imza
   ========================================================================== */
.footer-strip { border-top: 1px solid rgba(255, 255, 255, .08); }
.footer-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
}

.app-badges { display: grid; gap: 10px; }
.app-badges__label {
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    /*
     * Rozetler hem koyu (alt bilgi, çağrı bloğu) hem açık zeminde
     * durabiliyor. Varsayılan tema renkleridir; koyu kapsayıcıların
     * içinde aşağıdaki kurallarla beyaza çevrilir. Önceden hep beyaz
     * yazılıyordu ve açık temada yazılar görünmüyordu.
     */
    color: var(--muted);
}
.app-badges__row { display: flex; flex-wrap: wrap; gap: 10px; }
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.app-badge:hover { background: var(--bg-alt); border-color: var(--muted); color: var(--ink); }

/* Koyu zemin üzerinde: alt bilgi (koyu sürüm), çağrı bloğu, koyu bölümler */
.site-footer:not(.site-footer--acik) .app-badges__label,
.section--cta .app-badges__label,
.section--dark .app-badges__label { color: rgba(255, 255, 255, .55); }

.site-footer:not(.site-footer--acik) .app-badge,
.section--cta .app-badge,
.section--dark .app-badge {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .22);
}
.site-footer:not(.site-footer--acik) .app-badge:hover,
.section--cta .app-badge:hover,
.section--dark .app-badge:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .38);
}
.app-badge__text { display: grid; line-height: 1.2; }
.app-badge__text small { font-size: .66rem; opacity: .75; }
.app-badge__text strong { font-family: var(--font-head); font-size: .88rem; }

.payment-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.payment-mark {
    display: inline-grid;
    place-items: center;
    padding: 7px 12px;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .08);
    border-radius: 6px;
}

/* Geliştirici imzası — alt satırın ortasında */
.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
    transition: color .18s var(--ease), opacity .18s var(--ease);
}
.footer-credit img { height: 38px; width: auto; opacity: .95; transition: opacity .18s var(--ease); }
.footer-credit:hover { color: rgba(255, 255, 255, .7); }
.footer-credit:hover img { opacity: 1; }

.footer-bottom__inner { justify-content: space-between; }
.footer-copy { flex: 0 0 auto; }

@media (max-width: 900px) {
    .footer-strip__inner { flex-direction: column; align-items: flex-start; }
    .footer-bottom__inner { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
}

/* Mobil bağış düğmesi — dar ekranda sıkışmayan kısa biçim */
.header-donate-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    white-space: nowrap;
}
.header-donate-mobile:hover { background: var(--brand-dark); color: #fff; }

/* Yazı ancak çok dar ekranlarda gizlenir; 375px'te "BAĞIŞ" okunur kalır */
@media (max-width: 359px) {
    .header-donate-mobile span { display: none; }
    .header-donate-mobile { padding: 9px 11px; }
}

/* ============================================================
   AFET BİLGİ SİSTEMİ
   ============================================================ */

.disaster-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}
.disaster-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.disaster-stats > div {
    display: flex;
    flex-direction: column;
    min-width: 108px;
    padding: 12px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.disaster-stats strong {
    font-family: var(--font-head);
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--ink);
}
.disaster-stats span { font-size: .78rem; color: var(--muted); }

.disaster-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
}
.inline-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.inline-filter select {
    min-width: 150px;
    padding: 9px 14px;
    font: inherit;
    font-size: .86rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.filter-bar--bands .filter-bar__item.is-active.band-0-3 { background: var(--ok); border-color: var(--ok); color: #fff; }
.filter-bar--bands .filter-bar__item.is-active.band-3-4 { background: var(--warn); border-color: var(--warn); color: #fff; }
.filter-bar--bands .filter-bar__item.is-active.band-4\+ { background: var(--err); border-color: var(--err); color: #fff; }

/* Liste */
.disaster-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.disaster-row__link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.disaster-row__link:hover {
    color: var(--ink);
    border-color: var(--brand);
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
}
.disaster-row__mag,
.disaster-head__mag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    font-family: var(--font-head);
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
    background: var(--muted);
    border-radius: 12px;
}
.disaster-row__mag.is-low,  .disaster-head__mag.is-low  { background: #12805c; }
.disaster-row__mag.is-mid,  .disaster-head__mag.is-mid  { background: #b45309; }
.disaster-row__mag.is-high, .disaster-head__mag.is-high { background: #b91c1c; }
.disaster-row__mag.is-none, .disaster-head__mag.is-none { background: var(--ink-soft); }

.disaster-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.disaster-row__body strong { font-family: var(--font-head); font-size: 1rem; }
.disaster-row__meta { font-size: .8rem; color: var(--muted); }
.disaster-row__arrow { flex: 0 0 auto; font-size: 1.6rem; line-height: 1; color: var(--muted); }

.disaster-note {
    margin-top: 26px;
    padding: 14px 18px;
    font-size: .84rem;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

/* Detay */
.disaster-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.disaster-head__mag { width: 76px; height: 76px; font-size: 1.5rem; }
.disaster-head__type {
    margin: 0;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}
.disaster-head__location { margin: 4px 0 2px; font-size: 1.5rem; }
.disaster-head__time { margin: 0; font-size: .86rem; color: var(--muted); }

.disaster-response {
    margin-top: 24px;
    padding: 18px 22px;
    background: var(--surface-2);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
}
.disaster-response h3 { margin: 0 0 8px; font-size: 1.05rem; }

.disaster-map { margin-top: 24px; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.disaster-map iframe { display: block; }

.disaster-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    padding: 20px 24px;
    background: var(--brand-soft);
    border-radius: var(--radius);
}
.disaster-cta p { margin: 0; font-weight: 600; color: var(--ink); }

@media (max-width: 640px) {
    .disaster-row__link { gap: 12px; padding: 12px 14px; }
    .disaster-row__mag { width: 48px; height: 48px; font-size: 1rem; }
    .disaster-head { flex-direction: column; align-items: flex-start; }
    .inline-filter select { flex: 1 1 140px; min-width: 0; }
}

/* Bölüme gelindiğinde belirme — JS yoksa içerik zaten görünür */
html.js .reveal > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
}
html.js .reveal.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.js .reveal > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   TÜRKİYE HARİTASI — il adı etiketleri ve dokunmatik alt sayfa
   ========================================================================== */

/* Temsilciliğimiz olan illerin adı harita üzerinde yazar */
.tr-map__labels { pointer-events: none; }
.tr-map__label,
.tr-map__label-halo {
    font-family: var(--font-head);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .01em;
    paint-order: stroke;
}
.tr-map__label-halo {
    fill: none;
    stroke: rgba(12, 17, 28, .85);
    stroke-width: 3.2px;
    stroke-linejoin: round;
}
.tr-map__label { fill: #fff; stroke: none; }

@media (max-width: 720px) {
    .tr-map__label, .tr-map__label-halo { font-size: 11px; }
    .tr-map__label-halo { stroke-width: 4px; }
}

/*
 * Dokunmatik cihazda baloncuk, ekranın altına yapışan bir kart olur:
 * ile dokun → aç, kapat → başka ile dokun. Harita üzerinde küçücük bir
 * baloncuğu parmakla kovalamak gerekmez.
 */
@media (hover: none) {
    .tr-map__tooltip {
        position: fixed;
        inset-inline: 12px;
        bottom: 12px;
        top: auto !important;
        left: 12px !important;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: 0 -8px 40px rgba(10, 14, 24, .35);
        animation: sheet-up .22s var(--ease);
    }

    .tr-map__close {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 1.6rem;
        background: var(--surface-2);
    }

    /* Sayfa arkası soluklaşsın; dışarı dokunmak kapatır */
    .tr-map.is-sheet-open::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 89;
        background: rgba(10, 14, 24, .45);
    }
    .tr-map__tooltip { z-index: 90; }

    /* Sayfa açıkken sağdaki sosyal ray kartın üzerine binmesin */
    body.map-sheet-open .social-rail { display: none; }
}

@keyframes sheet-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   KURUMSAL SAYFALAR — içerik + yan menü
   ========================================================================== */

.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
}
.page-main { min-width: 0; }

.page-aside {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    display: grid;
    gap: 16px;
}

/* Grup içi sayfa gezinmesi */
.side-nav {
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.side-nav__title {
    margin: 0;
    padding: 14px 16px 10px;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.side-nav__list { margin: 0; padding: 0; list-style: none; }
.side-nav__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.side-nav__list a svg { flex: 0 0 auto; opacity: .45; transition: transform .18s var(--ease); }
.side-nav__list a:hover { background: var(--surface-2); color: var(--brand); }
.side-nav__list a:hover svg { transform: translateX(3px); opacity: 1; }
.side-nav__list a.is-current {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(255, 6, 6, .22);
}
.side-nav__list a.is-current svg { opacity: 1; }

/* Yan kartlar */
.side-card {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.side-card--cta { background: var(--brand-soft); border-color: transparent; }
.side-card--cta .btn { margin-top: 8px; }
.side-card__title {
    margin: 0 0 12px;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink);
}
.side-card__text { margin: 0 0 14px; font-size: .88rem; color: var(--ink-soft); }
.side-card__link {
    display: inline-block;
    margin-top: 12px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand);
}

.side-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
.side-contact a { color: var(--ink-soft); }
.side-contact a:hover { color: var(--brand); }

/* Belge şeridi (yan sütun) */
.cert-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cert-strip__item { display: grid; gap: 6px; text-align: center; }
.cert-strip__item img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.cert-strip__item:hover img { transform: translateY(-3px); border-color: var(--brand); }
.cert-strip__item span { font-size: .72rem; line-height: 1.35; color: var(--muted); }

/* Belge arşivi (tam sayfa) */
.cert-archive { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.cert-archive h2 { margin: 0 0 8px; }
.cert-archive__lead { margin: 0 0 24px; color: var(--muted); }

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cert-card > a {
    display: grid;
    gap: 10px;
    height: 100%;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cert-card > a:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow); }
.cert-card__media { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.cert-card__media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cert-card__body { display: grid; gap: 3px; }
.cert-card__body strong { font-size: .9rem; line-height: 1.35; color: var(--ink); }
.cert-card__body em { font-style: normal; font-size: .78rem; color: var(--brand); }
.cert-card__body span { font-size: .76rem; color: var(--muted); }

/* Sıradaki sayfa bağlantısı */
.page-next {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding: 20px 24px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.page-next:hover { border-color: var(--brand); transform: translateX(4px); }
.page-next__label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.page-next strong { flex: 1 1 auto; font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.page-next svg { flex: 0 0 auto; color: var(--brand); }

/* ==========================================================================
   BİZE KATILIN
   ========================================================================== */
.join-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 5vw, 60px);
    align-items: start;
}

.join-intro__title { margin: 0 0 22px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.join-points { display: grid; gap: 20px; margin: 0 0 28px; padding: 0; list-style: none; }
.join-points li { display: flex; gap: 14px; }
.join-points__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 12px;
}
.join-points strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: 1rem; color: var(--ink); }
.join-points p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.join-intro__text { font-size: .94rem; }

.join-form {
    padding: clamp(22px, 3vw, 34px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.join-form__title { margin: 0 0 4px; font-size: 1.25rem; }
.join-form__note { margin: 0 0 22px; font-size: .88rem; color: var(--muted); }

@media (max-width: 980px) {
    .page-layout, .join-layout { grid-template-columns: 1fr; }
    .page-aside { position: static; }
    .cert-strip { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
    .cert-strip { grid-template-columns: repeat(2, 1fr); }
    .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .page-next { flex-wrap: wrap; gap: 8px; }
}

/* ==========================================================================
   YÜZEN DÜĞMELER — sol alt yardım asistanı, sağ alt afet bildirimi
   ========================================================================== */

/*
 * Yüzen düğmeler başlığın (z-index: 100) üstünde durmalı; aşağı
 * kaydırırken sabit başlığın altına giriyorlardı. Çerez şeridi (200)
 * ve açılır pencere (350) yine bunların üstünde kalır.
 */
.fab { position: fixed; bottom: 22px; z-index: 120; }
.fab--assistant { inset-inline-start: 22px; }
.fab--alert     { inset-inline-end: 22px; }

.fab__button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 17px 0 13px;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(15, 20, 32, .28);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.fab__button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(15, 20, 32, .34); }
.fab__button:active { transform: translateY(0); }
.fab__button img { flex: 0 0 auto; }
.fab__button svg  { flex: 0 0 auto; }

.fab__button--bot   { background: var(--bg-dark); }
.fab__button--bot:hover { filter: brightness(1.15); }

.fab__button--alert { background: var(--brand); }
.fab__button--alert:hover { background: var(--brand-dark); }

/* Afet düğmesi kendini belli etsin */
.fab__button--alert::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid var(--brand);
    opacity: 0;
    animation: fab-pulse 2.6s var(--ease) infinite;
}
.fab--alert { }
.fab--alert .fab__button { position: relative; }

@keyframes fab-pulse {
    0%   { opacity: .55; transform: scale(.98); }
    70%  { opacity: 0;   transform: scale(1.18); }
    100% { opacity: 0;   transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    .fab__button--alert::before { animation: none; }
}

/* Açılan paneller */
.fab__panel {
    position: absolute;
    bottom: calc(100% + 14px);
    width: min(370px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fab-in .2s var(--ease);
}
.fab--assistant .fab__panel { inset-inline-start: 0; }
.fab--alert     .fab__panel { inset-inline-end: 0; }

@keyframes fab-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* --- Yardım asistanı --- */
.assistant__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    color: #fff;
    background: var(--bg-dark);
}
.assistant__head strong { display: block; font-family: var(--font-head); font-size: .95rem; }
.assistant__head span   { font-size: .74rem; opacity: .7; }
.assistant__head > div  { flex: 1 1 auto; }
.assistant__close {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .7;
}
.assistant__close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

.assistant__body {
    max-height: 280px;
    padding: 16px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
    background: var(--surface-2);
}
.assistant__msg {
    max-width: 86%;
    padding: 10px 14px;
    font-size: .88rem;
    line-height: 1.55;
    border-radius: 14px;
}
.assistant__msg a { color: var(--brand); font-weight: 600; text-decoration: underline; }
.assistant__msg--bot  { justify-self: start; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.assistant__msg--user { justify-self: end; background: var(--brand); color: #fff; }
.assistant__msg--user a { color: #fff; }

.assistant__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.assistant__chips button {
    padding: 7px 13px;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
}
.assistant__chips button:hover { color: var(--brand); border-color: var(--brand); }

.assistant__form { display: flex; gap: 8px; padding: 12px 14px; }
.assistant__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 15px;
    font: inherit;
    font-size: .88rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.assistant__form input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.assistant__form button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.assistant__form button:hover { background: var(--brand-dark); }

.assistant__wa {
    display: block;
    padding: 0 14px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: #12805c;
}

/* --- Afet bildirimi paneli --- */
.alert-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #fff;
    background: var(--brand);
}
.alert-panel__head > div { flex: 1 1 auto; }
.alert-panel__head strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.alert-panel__head span   { font-size: .76rem; opacity: .85; }

.alert-panel__body { padding: 16px; display: grid; gap: 14px; }

.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.need-card {
    display: grid;
    gap: 3px;
    padding: 13px 12px;
    text-align: start;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 13px;
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.need-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.need-card__icon {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: 4px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}
.need-card strong { font-family: var(--font-head); font-size: .87rem; color: var(--ink); }
.need-card em { font-style: normal; font-size: .72rem; line-height: 1.35; color: var(--muted); }

.alert-opt {
    padding: 13px;
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: 12px;
}
.alert-opt__row { display: flex; gap: 10px; cursor: pointer; }
.alert-opt__row input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); }
.alert-opt__row strong { display: block; font-size: .85rem; color: var(--ink); }
.alert-opt__row em { display: block; margin-top: 3px; font-style: normal; font-size: .74rem; line-height: 1.45; color: var(--muted); }
.alert-opt__status { margin: 9px 0 0; font-size: .76rem; color: #12805c; }
.alert-opt__status.is-warn { color: var(--err); }
.alert-opt__status:empty { display: none; }

.alert-panel__call {
    display: block;
    padding: 11px;
    text-align: center;
    font-size: .86rem;
    font-weight: 700;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}
.alert-panel__note { margin: 0; font-size: .74rem; text-align: center; color: var(--muted); }

/* --- Siren uyarısı --- */
.alert-siren {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(120, 6, 6, .45);
    backdrop-filter: blur(3px);
}
.alert-siren__box {
    position: relative;
    width: min(430px, 100%);
    padding: 34px 28px 26px;
    text-align: center;
    color: #fff;
    background: var(--brand);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.alert-siren__pulse {
    position: absolute;
    inset: -10px;
    border: 3px solid rgba(255, 255, 255, .55);
    border-radius: 26px;
    animation: siren-pulse 1.1s ease-out infinite;
}
@keyframes siren-pulse {
    0%   { opacity: .8; transform: scale(.99); }
    100% { opacity: 0;  transform: scale(1.06); }
}
.alert-siren__box h2 { margin: 0 0 8px; font-size: 1.35rem; color: #fff; }
.alert-siren__box p  { margin: 0 0 20px; font-size: .95rem; opacity: .92; }
.alert-siren__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.alert-siren__actions .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.alert-siren__actions .btn--ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* Mobil: düğmeler küçülür, paneller tam genişlik */
@media (max-width: 640px) {
    .fab { bottom: 16px; }
    .fab--assistant { inset-inline-start: 14px; }
    .fab--alert     { inset-inline-end: 14px; }

    /* Telefonda yuvarlak ve küçük: ekranın köşesini kaplamasın */
    .fab { bottom: 12px; }
    .fab--assistant { inset-inline-start: 12px; }
    .fab--alert     { inset-inline-end: 12px; }
    .fab__label { display: none; }
    .fab__button { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .fab--alert .fab__button { width: 44px; height: 44px; }
    .fab__button svg, .fab__icon, .fab__button img { width: 24px; height: 24px; }
    .fab--alert .fab__button svg { width: 21px; height: 21px; }

    /* Çerez rozeti: seçim yapıldıktan sonra telefonda görünmesin
       (yardımcı düğmesinin altında duruyordu). */
    .cookie-reopen { display: none !important; }
    /* Dikkat çeken halka da küçülsün */
    .fab__button--alert::before { inset: -3px; }

    .fab__panel {
        position: fixed;
        inset-inline: 12px;
        bottom: 84px;
        width: auto;
    }

    /* Sosyal ray afet düğmesinin üstüne binmesin */
    .social-rail { bottom: 150px; }
}

/* Afet bildirim formu — adım şeridi ve ihtiyaç bilgisi */
.report-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.report-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
}
.report-steps__item b {
    display: grid;
    place-items: center;
    width: 21px; height: 21px;
    font-size: .74rem;
    color: #fff;
    background: var(--muted);
    border-radius: 50%;
}
.report-steps__item.is-active { color: var(--brand); background: var(--brand-soft); }
.report-steps__item.is-active b { background: var(--brand); }

.notice--urgent { border-left: 4px solid var(--err); }

.report-need {
    margin: 0 0 18px;
    padding: 14px 18px;
    font-size: .92rem;
    color: var(--ink);
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   IŞIK KUTUSU — ürün görselleri
   ========================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: rgba(8, 11, 18, .93);
}
.lightbox img {
    max-width: min(1100px, calc(100vw - 130px));
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 10px;
}
.lightbox__close,
.lightbox__nav {
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .18s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .26); }

.lightbox__close {
    position: absolute;
    top: 18px; right: 18px;
    width: 42px; height: 42px;
    font-size: 1.9rem;
    line-height: 1;
}
.lightbox__nav { width: 48px; height: 48px; flex: 0 0 auto; font-size: 2rem; line-height: 1; }

.lightbox__count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    font-size: .82rem;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}

@media (max-width: 640px) {
    .lightbox { padding: 12px; }
    .lightbox img { max-width: calc(100vw - 24px); }
    .lightbox__nav { position: absolute; bottom: 22px; width: 44px; height: 44px; }
    .lightbox__nav--prev { left: 20px; }
    .lightbox__nav--next { right: 20px; }
}

/* ==========================================================================
   DAR EKRAN BAŞLIĞI — simgeler taşmasın
   ========================================================================== */
@media (max-width: 480px) {
    /* Arama simgesi mobil menünün içine taşındı; başlıkta yer kaplamasın */
    .header-tools [data-search-toggle] { display: none; }
    .header-tools { gap: 3px; }
    .icon-btn { width: 40px; height: 40px; }
    .icon-btn svg { width: 22px; height: 22px; }
    .burger { width: 40px; height: 40px; }
    .brand img { max-width: 128px; }
}

/* Mobil menü içi arama */
.main-nav__search { display: flex; gap: 8px; margin-bottom: 12px; }
.main-nav__search input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 14px;
    font: inherit;
    font-size: .9rem;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.main-nav__search input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.main-nav__search button {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

/* Ekran okuyucuya açık, gözle görünmeyen alan */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mobilde: mobil görsel yüklenmemişse geniş görsel kırpılmaz */
@media (max-width: 767px) {
    .hero__slide--m-contain .hero__media { background: var(--bg-dark); }
    .hero__slide--m-contain .hero__media img { object-fit: contain; }
    .hero__slide--m-cover .hero__media img { object-fit: cover; }
}

/* Parola tekrar denetimi */
.form__match { margin-top: 6px; font-weight: 600; }
.form__match.is-ok  { color: #12805c; }
.form__match.is-bad { color: var(--err); }

/* ==========================================================================
   KART TIKLAMA ALANI
   Başlık bağlantısı kartın tamamını kaplar: görsele, başlığa ve
   "Haberi oku" yazısına tıklamak aynı sayfaya götürür.
   ========================================================================== */
.card { position: relative; }
.card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.card__more { position: relative; }
.card:hover .card__more { color: var(--brand); }

/* Yüzen düğme ikonları */
.fab__icon { border-radius: 50%; }
.assistant__avatar { border-radius: 50%; }
.fab__whistle { transform: rotate(-8deg); }

.alert-panel__wa {
    display: block;
    padding: 11px;
    text-align: center;
    font-size: .86rem;
    font-weight: 700;
    color: #0f7a4d;
    background: #e7f7ef;
    border-radius: 10px;
}
.alert-panel__wa:hover { background: #d6f2e4; color: #0f7a4d; }

/* DARCYN imzası biraz daha görünür */
.admin__credit img { height: 38px; }

/* ==========================================================================
   MOBİL YERLEŞİM DÜZELTMELERİ
   ========================================================================== */

/*
 * Sağdaki sosyal ray, slider oku ile üst üste biniyordu.
 * Ray biraz aşağı iner; ok kendi hizasında kalır.
 */
@media (max-width: 1200px) {
    .social-rail { top: auto; bottom: 190px; transform: none; }
}

/* Mobilde iki yüzen düğme: derli toplu, eşit hizada */
@media (max-width: 640px) {
    .fab { bottom: 14px; }

    .fab__button { width: 46px; height: 46px; padding: 0; justify-content: center; }
    .fab--alert .fab__button { width: 44px; height: 44px; }

    .fab__button img,
    .fab__button svg { width: 24px; height: 24px; }
    .fab--alert .fab__button svg { width: 21px; height: 21px; }

    .social-rail { bottom: 96px; }
}

/* Dar telefonlarda menü düğmesi ekrana yapışmasın */
@media (max-width: 380px) {
    .burger { width: 30px; }
    .burger span { width: 18px; }
    .burger span:nth-child(2) { width: 12px; }
}

/*
 * Mobilde menü ve simgeler sağa yaslanır.
 * Masaüstünde bunu ".main-nav { margin-inline-start: auto }" yapıyordu;
 * mobilde menü sabit konumlu olduğu için akıştan çıkıyor ve
 * simgeler ortada kalıyordu.
 */
@media (max-width: 1400px) {
    .header-tools { margin-inline-start: auto; }
}

/* Acil düdük düğmesi */
.emergency-whistle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    text-align: start;
    font: inherit;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.emergency-whistle:hover { border-color: var(--brand); }
.emergency-whistle strong { display: block; font-family: var(--font-head); font-size: .9rem; }
.emergency-whistle em { display: block; margin-top: 2px; font-style: normal; font-size: .72rem; line-height: 1.4; color: var(--muted); }
.emergency-whistle__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}

/* Çalarken kendini belli etsin */
.emergency-whistle.is-on {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
    animation: whistle-flash 1s steps(2, jump-none) infinite;
}
.emergency-whistle.is-on em { color: rgba(255, 255, 255, .85); }
.emergency-whistle.is-on .emergency-whistle__icon { color: var(--brand); background: #fff; }

@keyframes whistle-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 6, 6, .5); }
    50%      { box-shadow: 0 0 0 10px rgba(255, 6, 6, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .emergency-whistle.is-on { animation: none; }
}

/* Adet kutusu — sınıra gelince düğme sönükleşir */
.qty__btn:disabled { opacity: .35; cursor: default; }
.qty__btn:disabled:hover { background: var(--bg-alt); color: var(--ink); }
.qty--sm .qty__btn { width: 34px; height: 38px; font-size: 1rem; }

/* Belge kartları: sıraya girerek belirir, üzerine gelince kalkar */
.cert-card > a { position: relative; overflow: hidden; }
.cert-card__media img { transition: transform .35s var(--ease); }
.cert-card > a:hover .cert-card__media img { transform: scale(1.05); }
.cert-card > a::after {
    content: 'Büyüt';
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    padding: 6px 0;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
    background: rgba(20, 28, 47, .82);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cert-card > a:hover::after { opacity: 1; transform: none; }

/* ==========================================================================
   DUYURULAR — üstte bant, sağ altta kart
   ========================================================================== */
/*
 * Duyuru rengi: tür rengi varsayılan, duyuruya özel renk verilmişse
 * (--announce-bg / --announce-fg) o kazanır.
 */
.announce { color: var(--announce-fg, #fff); background: var(--announce-bg, var(--ink)); }
.announce--bilgi  { background: var(--announce-bg, #1d4ed8); }
.announce--basari { background: var(--announce-bg, #12805c); }
.announce--uyari  { background: var(--announce-bg, #b45309); }
.announce--acil   { background: var(--announce-bg, var(--brand)); }

.announce__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
}
.announce__icon { flex: 0 0 auto; display: grid; place-items: center; }
.announce__text { flex: 1 1 auto; margin: 0; font-size: .88rem; line-height: 1.45; }
.announce__text strong { font-family: var(--font-head); }
.announce__text span { opacity: .9; }
.announce__text span::before { content: ' — '; opacity: .6; }

.announce__link {
    flex: 0 0 auto;
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    white-space: nowrap;
}
.announce__link:hover { color: #fff; opacity: .85; }

.announce__close {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    font-size: 1.5rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    opacity: .75;
}
.announce__close:hover { opacity: 1; background: rgba(255, 255, 255, .16); }

/* Kart biçimi */
.announce-card {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 92px;
    /*
     * Yüzen düğmelerin (120) üstünde durmalı: telefonda "Afet Bildir"
     * düğmesi kartın kapatma çarpısının üstüne biniyor ve kart
     * kapatılamıyordu. Çerez şeridi (200) yine üstte kalır.
     */
    z-index: 130;
    display: flex;
    gap: 12px;
    width: min(340px, calc(100vw - 32px));
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--info);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    animation: fab-in .25s var(--ease);
}
.announce-card--basari { border-inline-start-color: var(--ok); }
.announce-card--uyari  { border-inline-start-color: var(--warn); }
.announce-card--acil   { border-inline-start-color: var(--brand); }

.announce-card__icon { flex: 0 0 auto; color: var(--info); }
.announce-card--basari .announce-card__icon { color: var(--ok); }
.announce-card--uyari  .announce-card__icon { color: var(--warn); }
.announce-card--acil   .announce-card__icon { color: var(--brand); }

.announce-card__body { flex: 1 1 auto; min-width: 0; }
.announce-card__body strong { display: block; margin-bottom: 4px; font-family: var(--font-head); font-size: .95rem; color: var(--ink); }
.announce-card__body p { margin: 0 0 8px; font-size: .85rem; line-height: 1.55; color: var(--ink-soft); }
.announce-card__body a { font-size: .84rem; font-weight: 700; color: var(--brand); }

.announce-card__close {
    flex: 0 0 auto;
    align-self: flex-start;
    /* Parmakla rahat basılsın: 26px küçüktü */
    width: 36px; height: 36px;
    margin: -6px -6px 0 0;
    touch-action: manipulation;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.announce-card__close:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 900px) {
    .announce__inner { flex-wrap: wrap; }
    .announce__text { flex: 1 1 100%; order: 2; }
    .announce__text span { display: block; }
    .announce__text span::before { content: none; }

    /*
     * Kapatma düğmesi ilk satırda, simgenin karşısında dursun.
     * Yazı tam satır olduğu için düğme aşağı kayıp görünmez
     * hale gelebiliyordu; dokunma alanı da büyütüldü.
     */
    .announce__icon { order: 0; }
    .announce__close {
        order: 1;
        margin-inline-start: auto;
        width: 36px;
        height: 36px;
        opacity: .9;
    }
    .announce__link { order: 3; flex: 1 1 100%; }
}

@media (max-width: 640px) {
    /* Yüzen düğmelerin (alt 22px + 42px yükseklik) tam üstünde */
    .announce-card { inset-inline: 12px; bottom: 78px; width: auto; padding: 14px; }
    .announce-card__close {
        position: relative;
        z-index: 2;
        width: 44px;
        height: 44px;
        font-size: 1.7rem;
        color: var(--ink);
        background: var(--bg-alt);
    }
    /* Görünen düğmeden taşan görünmez dokunma alanı */
    .announce-card__close::before {
        content: '';
        position: absolute;
        inset: -8px;
    }
}

/* Panelde duyuru türü rozeti */

/* Denetim şeridi — küçük, bilgilendirici */
.footer-audit {
    padding: 14px 0;
    background: rgba(255, 255, 255, .04);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-audit__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.footer-audit img {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 3px;
}
.footer-audit p { margin: 0; font-size: .78rem; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.footer-audit strong { color: rgba(255, 255, 255, .8); font-weight: 600; }
.footer-audit span { display: inline-block; margin-inline-start: 6px; opacity: .8; }

@media (max-width: 640px) {
    .footer-audit__inner { flex-direction: column; gap: 8px; }
    .footer-audit p { font-size: .74rem; }
}

/* ==========================================================================
   BELGE GÖRÜNTÜLEYİCİ — indirilemez, yalnızca görüntülenir
   ========================================================================== */
.cert-card__open,
.cert-strip__item {
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: zoom-in;
}
.cert-card__open {
    display: grid;
    gap: 10px;
    height: 100%;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cert-card__open:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow); }
.cert-card__open::after {
    content: 'Büyüt';
    position: absolute;
    inset-inline: 12px;
    bottom: 12px;
    padding: 6px 0;
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    color: #fff;
    background: rgba(20, 28, 47, .82);
    border-radius: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cert-card__open:hover::after { opacity: 1; transform: none; }

.cert-strip__item { display: grid; gap: 6px; text-align: center; }

/* Görüntüleme kutusu */
.cert-viewer {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    flex-direction: column;
    background: rgba(8, 11, 18, .94);
}
.cert-viewer__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cert-viewer__bar strong { flex: 1 1 auto; font-family: var(--font-head); font-size: .98rem; }
.cert-viewer__note { flex: 0 0 auto; font-size: .76rem; color: rgba(255, 255, 255, .55); }
.cert-viewer__close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.cert-viewer__close:hover { background: rgba(255, 255, 255, .26); }

.cert-viewer__stage {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding: 20px;
    min-height: 0;
}
.cert-viewer__stage img {
    max-width: min(1000px, 100%);
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    -webkit-user-drag: none;
    user-select: none;
}
.cert-viewer__stage iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 8px; background: #fff; }

@media (max-width: 640px) {
    .cert-viewer__note { display: none; }
    .cert-viewer__stage { padding: 10px; }
}

/* Video — yalnızca adres girildiğinde çizilir */
.video-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-dark);
    border-radius: var(--radius);
}
.video-embed iframe,
.video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

/* ==========================================================================
   ÜRÜN — sipariş üzerine üretim ve üreten anne
   ========================================================================== */
.made-to-order {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ink);
    background: #fff8e8;
    border: 1px solid #f5deb0;
    border-radius: 10px;
}
:root[data-theme="dark"] .made-to-order { background: rgba(180, 83, 9, .14); border-color: rgba(180, 83, 9, .4); }
.made-to-order svg { flex: 0 0 auto; margin-top: 2px; color: var(--warn); }
.made-to-order strong { display: block; margin-top: 3px; font-size: .84rem; color: var(--warn); }

.producer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}
a.producer:hover { border-color: var(--brand); transform: translateX(3px); color: var(--ink); }

.producer__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}
.producer__avatar img { width: 100%; height: 100%; object-fit: cover; }
.producer--shared .producer__avatar { background: #fff; border: 1px solid var(--line); }
.producer--shared .producer__avatar img { object-fit: contain; padding: 4px; }

.producer__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.producer__body em {
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.producer__body strong { font-family: var(--font-head); font-size: .95rem; }
.producer__body span { font-size: .78rem; color: var(--muted); }
.producer__arrow { flex: 0 0 auto; color: var(--brand); }

/* Video varsa ana görsel biraz küçülür */
.product-detail__main.is-secondary { margin-top: 12px; }

/* Haber ve etkinlik videosu */
.article__video { margin-bottom: clamp(20px, 3vw, 32px); }

/* ==========================================================================
   ÜRETEN ANNELER
   ========================================================================== */
.producers-intro { max-width: 68ch; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; color: var(--ink-soft); }

.producer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.producer-card > a {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.producer-card > a:hover { transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); }
.producer-card strong { font-family: var(--font-head); font-size: 1rem; }
.producer-card span:not(.producer-card__avatar) { font-size: .8rem; color: var(--muted); }

.producer-card__avatar,
.producer-head__avatar {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin-bottom: 8px;
    overflow: hidden;
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 50%;
}
.producer-card__avatar img,
.producer-head__avatar img { width: 100%; height: 100%; object-fit: cover; }

.producer-head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.producer-head__avatar { width: 110px; height: 110px; margin: 0; font-size: 2.4rem; }
.producer-head h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.producer-head__meta { margin: 0; color: var(--brand); font-weight: 600; }

.producer-story { max-width: 70ch; margin-bottom: clamp(28px, 4vw, 44px); }
.producer-products__title { margin: 0 0 20px; font-size: 1.25rem; }

@media (max-width: 560px) {
    .producer-head { flex-direction: column; text-align: center; }
    .producer-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ==========================================================================
   İNDİRİLEBİLİR DOSYA LİSTESİ
   ========================================================================== */
.file-list-block { margin-top: clamp(28px, 4vw, 44px); }
.file-list-block h2 { margin: 0 0 6px; }
.file-list-block__lead { margin: 0 0 20px; color: var(--muted); }

.file-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.file-row > a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.file-row > a:hover { border-color: var(--brand); transform: translateX(3px); color: var(--ink); }

.file-row__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 10px;
}
.file-row__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.file-row__body strong { font-family: var(--font-head); font-size: .96rem; }
.file-row__body span { font-size: .82rem; color: var(--muted); }
.file-row__meta { flex: 0 0 auto; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.file-row__action {
    flex: 0 0 auto;
    padding: 7px 16px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}

.teklif-form {
    margin-top: clamp(32px, 4vw, 48px);
    padding: clamp(22px, 3vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.teklif-form h2 { margin: 0 0 4px; font-size: 1.25rem; }
.teklif-form__note { margin: 0 0 22px; font-size: .88rem; color: var(--muted); }

@media (max-width: 640px) {
    .file-row > a { flex-wrap: wrap; }
    .file-row__body { flex: 1 1 100%; order: 2; }
    .file-row__meta { order: 3; }
    .file-row__action { order: 4; margin-inline-start: auto; }
}

/* Doğrulama kodu girişi */
.code-input {
    font-family: var(--font-head);
    font-size: 1.9rem !important;
    font-weight: 700;
    letter-spacing: .5em;
    text-align: center;
    text-indent: .5em;
}
.link-button {
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--brand);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}
.auth-card__foot { margin-top: 18px; text-align: center; font-size: .88rem; color: var(--muted); }
.auth-card__foot p { margin: 0; }

/* ==========================================================================
   SAYAÇLAR — simgeler ve sayaç başına animasyon
   ========================================================================== */
.stat { position: relative; }

.stat__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(64px, 8vw, 88px);
    height: clamp(64px, 8vw, 88px);
    margin: 0 auto 12px;
    padding: 12px;
    /* Simgeler saydam zeminli; arkalarındaki daire yönetimden ayarlanır */
    background: var(--stats-icon-bg, rgba(31, 42, 68, .06));
    border: 1px solid rgba(128, 128, 128, .18);
    border-radius: 22px;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.stat__icon img { width: 100%; height: 100%; object-fit: contain; }

/*
 * Düz renk simge: görsel maske olarak kullanılır, boyayı CSS verir.
 * Sıra ile koyu ve kırmızı — renkler yönetimden gelir.
 * Maske desteklenmezse görsel kendi renkleriyle görünür (bozulmaz).
 */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    .stat__icon--duz img { visibility: hidden; }
    .stat__icon--duz::after {
        content: '';
        position: absolute;
        inset: 12px;
        background: var(--simge-renk, var(--stats-icon-1, #1f2a44));
        -webkit-mask: var(--simge) center / contain no-repeat;
        mask: var(--simge) center / contain no-repeat;
    }
}
:root { --stats-icon-1: #1f2a44; --stats-icon-2: #c0392b; }
:root[data-theme="dark"] { --stats-icon-1: #e8ecf4; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --stats-icon-1: #e8ecf4; }
}
.stat:hover .stat__icon { background: var(--stats-icon-hover-bg, rgba(31, 42, 68, .11)); transform: translateY(-3px); }

/*
 * Giriş animasyonları.
 *
 * Her sayaç kendi hareketiyle girer; sıralı gecikme sayesinde
 * soldan sağa dalga hâlinde belirirler. Anahtar kare yerine geçiş
 * kullanılır: sekme sırasında sekme yapan bir yumuşatma eğrisi
 * hareketi verir ve animasyon yarıda kalsa bile simge görünür
 * duruma ulaşır. JS çalışmazsa "is-in" hiç eklenmez, bu yüzden
 * o durumda simgeler baştan görünür bırakılır.
 */
html.js .stat__icon {
    opacity: 0;
    transition:
        opacity .5s ease var(--gecikme, 0ms),
        transform .6s var(--egri, cubic-bezier(.34, 1.4, .64, 1)) var(--gecikme, 0ms),
        background .25s var(--ease);
}
html.js .stat { --gecikme: calc(var(--i, 0) * 110ms); }

/*
 * Telefonda simgeler ucusmasin: kucuk ekranda dagilip toplanan
 * simgeler hata gibi duruyordu. Sayilar yine sayarak dolar.
 */
@media (max-width: 760px) {
    html.js .stat__icon { opacity: 1 !important; transform: none !important; transition: none !important; }
}

html.js .stat--yukari .stat__icon { transform: translateY(26px); }
html.js .stat--buyu   .stat__icon { transform: scale(.5); }
html.js .stat--don    .stat__icon { transform: rotate(-25deg) scale(.7); }
html.js .stat--sek    .stat__icon { transform: translateY(-32px); --egri: cubic-bezier(.2, 1.8, .4, 1); }
html.js .stat--solla  .stat__icon { transform: translateX(-28px) rotate(-8deg); }

html.js .stat.is-in .stat__icon {
    opacity: 1;
    transform: none;
}

/* Fare üzerine gelince gecikme olmadan tepki versin */
html.js .stat:hover .stat__icon { --gecikme: 0ms; }

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

/* ==========================================================================
   BAŞLIK ÜSTÜ ŞERİT — sosyal ikonlar, kısa duyuru, telefon
   ========================================================================== */
.topbar {
    /* Şeridin tüm renkleri yönetimden değiştirilebilir */
    background: var(--topbar-bg, #0d1420);
    color: var(--topbar-fg, rgba(255, 255, 255, .72));
    border-bottom: 1px solid rgba(128, 128, 128, .16);
    font-size: .78rem;
}
.topbar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 38px;
}

/* Yan bölgeler eşit paylaşır; ortadaki ikonlar tam ortada kalır */
.topbar__side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.topbar__side--end { justify-content: flex-end; }

.topbar__note {
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.topbar__note:hover { color: var(--topbar-icon-hover, #fff); }

.topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    white-space: nowrap;
}
.topbar__phone:hover { color: var(--topbar-icon-hover, #fff); }

.topbar__social {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.topbar__social a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--topbar-icon, rgba(255, 255, 255, .6));
    border-radius: 8px;
    transition: color .18s var(--ease), background .18s var(--ease);
}
.topbar__social a:hover {
    color: var(--topbar-icon-hover, #fff);
    background: rgba(128, 128, 128, .16);
}

/* Hizalama: ikonların bulunduğu yer, boş yan bölgeyi büzerek ayarlanır */
.topbar--sol .topbar__side--start { flex: 0 0 auto; }
.topbar--sol .topbar__social { order: -1; margin-inline-end: auto; }
.topbar--sag .topbar__side--end { flex: 0 0 auto; }
.topbar--sag .topbar__social { margin-inline-start: auto; }

@media (max-width: 780px) {
    /* Dar ekranda telefon ve duyuru gizlenir, ikonlar ortada kalır */
    .topbar__side { display: none; }
    .topbar__inner { justify-content: center; min-height: 34px; }
}

/* ==========================================================================
   AÇIK BAŞLIK — kurumsal renk: siyah-kırmızı logo, beyaz zemin
   ========================================================================== */
.site-header--acik {
    background: #ffffff;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .site-header--acik {
    background: var(--surface);
    border-bottom-color: var(--line);
}

.site-header--acik .main-nav__link { color: var(--ink-soft); }
.site-header--acik .main-nav__link:hover,
.site-header--acik .main-nav__link.active { color: var(--brand); }

.site-header--acik .icon-btn { color: var(--ink-soft); }
.site-header--acik .icon-btn:hover { color: var(--brand); background: var(--surface-2); }

.site-header--acik .burger span { background: var(--ink); }

/* Açık zeminde logo plakası olmadan durur */
.site-header--acik .brand img { filter: none; }

/* Şerit başlığın üstünde koyu kalır: iki katman birbirinden ayrılır */
.site-header--acik.is-stuck { box-shadow: 0 2px 14px rgba(20, 28, 47, .1); }

@media (max-width: 1400px) {
    .site-header--acik .main-nav { background: var(--surface); }
}

/*
 * Açık başlıkta logo kare bir amblem olduğu için başlık biraz
 * yükselir: alt satırdaki "Çocuk Hakları ve Afet Mücadele Derneği"
 * yazısı okunur kalsın.
 */
@media (min-width: 1401px) {
    .site-header--acik { --header-h: 96px; }
}
.site-header--acik .brand { padding: 10px 0; }
.site-header--acik .brand img { max-height: 100%; }

/* ==========================================================================
   TEK HABER — yatay öne çıkan kart
   Tek haber üç sütunluk ızgarada yalnız kalmasın diye kullanılır.
   ========================================================================== */
.section__title--inline { margin: 2rem 0 1rem; font-size: 1.3rem; }

.feature-news {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: center;
    padding: 16px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.feature-news:hover {
    color: var(--ink);
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.feature-news__media { overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-2); }
.feature-news__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .35s var(--ease);
}
.feature-news:hover .feature-news__media img { transform: scale(1.04); }

.feature-news__body { display: grid; gap: 7px; }
.feature-news__body time { font-size: .78rem; color: var(--muted); }
.feature-news__body strong { font-family: var(--font-head); font-size: 1.2rem; line-height: 1.35; }
.feature-news__body span { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.feature-news__body em { font-style: normal; font-size: .86rem; font-weight: 700; color: var(--brand); }

@media (max-width: 700px) {
    .feature-news { grid-template-columns: 1fr; }
}

/* ==========================================================================
   AFET BİLDİRİMİ ÖN KONTROLÜ
   ========================================================================== */
/* Afet bildirim kapısı: sayfayı kaplamayan, ölçülü bir kart */
.afet-gate { margin: 0 auto 24px; max-width: 520px; }
.afet-gate__box {
    padding: 22px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.afet-gate__icon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    margin: 0 auto 10px;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 50%;
}
.afet-gate__icon svg { width: 20px; height: 20px; }
.afet-gate__box h2 { margin: 0 0 6px; font-size: 1.08rem; line-height: 1.35; }
.afet-gate__box p { margin: 0 auto 16px; max-width: 46ch; color: var(--ink-soft); font-size: .88rem; }
.afet-gate__actions .btn { padding: 9px 18px; font-size: .86rem; }

.afet-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.afet-gate__no { text-align: start; }
.afet-gate__no p { margin: 0 0 18px; }
.afet-gate__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.afet-gate__back { margin-top: 18px !important; text-align: center; font-size: .86rem; color: var(--muted); }

@media (max-width: 520px) {
    .afet-gate__actions .btn { width: 100%; }
}

/* Üye bilgisiyle dolan alanlar için not */
.form__hint--filled {
    grid-column: 1 / -1;
    margin: 0 0 4px;
    padding: 9px 13px;
    color: #0f7a4d;
    background: #e7f7ef;
    border-radius: 8px;
}
:root[data-theme="dark"] .form__hint--filled { background: rgba(18, 128, 92, .16); }

/* ==========================================================================
   AFET LİSTESİ — canlı akış ve kaynak rozeti
   ========================================================================== */
.live-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: .8rem;
    color: var(--muted);
}
.live-note__dot {
    width: 8px; height: 8px;
    background: #12805c;
    border-radius: 50%;
    animation: canli 2s ease-in-out infinite;
}
@keyframes canli {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(18, 128, 92, .5); }
    50%      { opacity: .6; box-shadow: 0 0 0 6px rgba(18, 128, 92, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-note__dot { animation: none; } }

.source-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 999px;
    vertical-align: middle;
}
.source-tag--kurum    { color: #12805c; background: #e7f7ef; }
.source-tag--bildirim { color: var(--warn); background: #fff4e5; }
:root[data-theme="dark"] .source-tag--kurum    { background: rgba(18, 128, 92, .18); }
:root[data-theme="dark"] .source-tag--bildirim { background: rgba(180, 83, 9, .2); }

/* Yeni gelen kayıt kısa süre vurgulanır */
.disaster-row.is-fresh .disaster-row__link {
    border-color: var(--brand);
    animation: yeni-kayit 6s ease-out;
}
@keyframes yeni-kayit {
    0%   { background: var(--brand-soft); transform: translateX(-6px); }
    12%  { transform: none; }
    100% { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { .disaster-row.is-fresh .disaster-row__link { animation: none; } }

/* Uyarı kaynağı: bildirimi kimin ilettiği açıkça yazılır */
.alert-opt__source {
    margin: .5rem 0 0;
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
    font-size: .74rem;
    line-height: 1.5;
    color: var(--muted);
}

/* ============================================================
   SLIDER — KINDHEART STİLİ
   ------------------------------------------------------------
   İçerik aynı, görünüm farklı. Yönetimden stil "klasik"e
   çevrildiğinde bu bloktaki hiçbir kural devreye girmez;
   dönüş tek seçimlik bir iştir.
   ============================================================ */

/* Slayt logosu — her iki stilde de çalışır */
.hero__logo {
    display: block;
    /*
     * Genişlik yönetimden gelir ama son sözü ekran söyler:
     * dar ekranda logo, altındaki başlık ve butonu slaytın
     * dışına itecek kadar büyümemeli.
     */
    width: min(var(--hero-logo-w, 160px), 70%);
    height: auto;
    max-height: 30vh;
    object-fit: contain;
    margin: 0 0 18px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}
.hero__content--center .hero__logo { margin-inline: auto; }
.hero__content--right  .hero__logo { margin-inline-start: auto; }

/* Perde: tek yönlü koyulaşma yerine alttan yükselen yumuşak zemin */
.hero--kindheart .hero__overlay {
    background:
        linear-gradient(180deg, rgba(11, 15, 26, .4) 0%, rgba(11, 15, 26, .22) 45%, rgba(11, 15, 26, .85) 100%),
        linear-gradient(90deg, rgba(11, 15, 26, .78) 0%, rgba(11, 15, 26, .25) 55%, transparent 100%);
}

/*
 * Yavaş yakınlaşma (Ken Burns).
 * Yalnızca etkin slaytta çalışır; arka plandaki slaytlar
 * boşuna kare çizmesin diye geçişte durur.
 */
.hero--kindheart .hero__media img {
    transform: scale(1.04);
    transition: transform 7s linear;
}
.hero--kindheart .hero__slide.is-active .hero__media img { transform: scale(1.13); }

/* Küçük başlığın önündeki kısa çizgi */
.hero--kindheart .hero__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    letter-spacing: .26em;
    /* Marka kırmızısı açık renkli fotoğrafta kaybolur; gölge okunur tutar */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75), 0 2px 14px rgba(0, 0, 0, .5);
}
.hero--kindheart .hero__subtitle::before {
    content: "";
    width: 34px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.hero--kindheart .hero__content--center .hero__subtitle::after {
    content: "";
    width: 34px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.hero--kindheart .hero__title {
    font-size: clamp(2.1rem, 6.4vw, 4.4rem);
    letter-spacing: -.02em;
    text-shadow: 0 4px 26px rgba(0, 0, 0, .35);
}
.hero--kindheart .hero__text {
    font-size: clamp(1rem, 1.7vw, 1.22rem);
    line-height: 1.75;
    max-width: 54ch;
}
.hero--kindheart .hero__actions { gap: 14px; margin-top: 4px; }
.hero--kindheart .hero__actions .btn {
    padding: 15px 34px;
    border-radius: 999px;
    font-size: .95rem;
    letter-spacing: .01em;
}

/*
 * Yazılar sırayla belirir.
 * Gecikmeler slaydın kendi içinde artar; okuyan göz yukarıdan
 * aşağıya takip eder. Hareketi kapatmış kullanıcıda devre dışı.
 */
.hero--kindheart .hero__logo,
.hero--kindheart .hero__subtitle,
.hero--kindheart .hero__title,
.hero--kindheart .hero__text,
.hero--kindheart .hero__actions {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.hero--kindheart .hero__slide.is-active .hero__logo,
.hero--kindheart .hero__slide.is-active .hero__subtitle,
.hero--kindheart .hero__slide.is-active .hero__title,
.hero--kindheart .hero__slide.is-active .hero__text,
.hero--kindheart .hero__slide.is-active .hero__actions {
    opacity: 1;
    transform: none;
}
.hero--kindheart .hero__slide.is-active .hero__logo     { transition-delay: .15s; }
.hero--kindheart .hero__slide.is-active .hero__subtitle { transition-delay: .28s; }
.hero--kindheart .hero__slide.is-active .hero__title    { transition-delay: .42s; }
.hero--kindheart .hero__slide.is-active .hero__text     { transition-delay: .56s; }
.hero--kindheart .hero__slide.is-active .hero__actions  { transition-delay: .70s; }

/* Yuvarlak, çerçeveli oklar */
.hero--kindheart .hero__arrow {
    width: 54px; height: 54px;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .45);
    backdrop-filter: none;
    transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.hero--kindheart .hero__arrow:hover {
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-50%) scale(1.06);
}

/* Noktalar yerine çubuklar */
.hero--kindheart .hero__dots { bottom: 34px; gap: 12px; }
.hero--kindheart .hero__dots button {
    width: 30px; height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .4);
}
.hero--kindheart .hero__dots button.is-active { width: 54px; background: var(--brand); }

@media (max-width: 767px) {
    .hero--kindheart .hero__arrow { width: 42px; height: 42px; }
    .hero--kindheart .hero__dots { bottom: 14px; }
    .hero--kindheart .hero__dots button { width: 20px; }
    .hero--kindheart .hero__dots button.is-active { width: 34px; }
    .hero--kindheart .hero__actions .btn { padding: 13px 26px; }

    /* Yazı yığını noktaların üstünde bitsin, üst üste binmesin */
    .hero--kindheart .hero__content { padding-bottom: 34px; }

    /*
     * Telefonda slayt logosu basilmaz.
     * Slayt gorselinin kendisinde zaten logo oluyor; dar ekranda
     * ikisi ust uste binip yaziyi da asagi itiyordu.
     */
    .hero__logo-kutu,
    .hero__logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero--kindheart .hero__media img,
    .hero--kindheart .hero__slide.is-active .hero__media img { transform: none; transition: none; }
    .hero--kindheart .hero__logo,
    .hero--kindheart .hero__subtitle,
    .hero--kindheart .hero__title,
    .hero--kindheart .hero__text,
    .hero--kindheart .hero__actions { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   YAZI GALERİSİ
   ------------------------------------------------------------
   Haber ve proje sayfalarında büyük görsel şeridi + altında
   küçük resimler. Şerit CSS ile kaydırılır (scroll-snap), JS
   yalnızca oklara ve küçük resimlere bakar; betik çalışmasa da
   parmakla kaydırılabilir.
   ============================================================ */

.gallery {
    position: relative;
    margin: 0 0 28px;
}

.gallery__stage {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    /* Yapışkan kaydırma parmakla gezinmek için; yumuşak geçişi JS yapar */
    scroll-snap-type: x mandatory;
    border-radius: var(--radius-lg, 16px);
    /* Kaydırma çubuğu görseli bölmesin */
    scrollbar-width: none;
}
.gallery__stage::-webkit-scrollbar { display: none; }

.gallery__item {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    background: var(--surface-2);
}
.gallery__item img {
    display: block;
    width: 100%;
    /*
     * Instagram'dan gelen görseller genelde kare ya da 4:5.
     * Sabit bir en-boy oranı vermek, farklı ölçülerdeki
     * fotoğrafların şeridi zıplatmasını önler.
     */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: zoom-in;
}
.gallery--tek .gallery__item img { cursor: zoom-in; }

.gallery__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 26px 18px 14px;
    font-size: .85rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(11, 15, 26, .82));
}

.gallery__arrow {
    position: absolute;
    top: calc(50% - 46px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    transform: translateY(-50%);
    transition: background .2s var(--ease), color .2s var(--ease);
}
.gallery__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.gallery__arrow[disabled] { opacity: .35; cursor: default; }
.gallery__arrow--prev { left: 12px; }
.gallery__arrow--next { right: 12px; }

.gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.gallery__thumb {
    flex: 0 0 auto;
    width: 88px; height: 66px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb.is-active { opacity: 1; border-color: var(--brand); }

@media (max-width: 640px) {
    .gallery__item img { aspect-ratio: 1 / 1; }
    .gallery__arrow { width: 36px; height: 36px; top: calc(50% - 40px); }
    .gallery__thumb { width: 68px; height: 52px; }
}

/* ------------------------------------------------------------
   KISAYOL RAYI
   Sosyal medya üst şeride taşındı; rayda tema düğmesi ile menü
   ekranından yönetilen birkaç kısayol kaldı. Açılıp kapanan kulba
   gerek yok — panel hep açık durur, üzerine gelince etiket açılır.
   ------------------------------------------------------------ */
.social-rail--kisayol .social-rail__panel {
    width: 52px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

.social-rail__link {
    position: relative;
    /* Etiket dışarı taşacağı için kırpma bu satırda kapatılır */
    overflow: visible;
}

/*
 * Etiket, simgenin solunda açılır.
 * Kapalıyken genişliği sıfır olduğu için raya yer kaplamaz;
 * dokunmatik cihazda hiç açılmaz, orada simge tek başına yeterli.
 */
.social-rail__label {
    position: absolute;
    inset-inline-end: 100%;
    top: 50%;
    display: flex;
    align-items: center;
    height: 38px;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: max-width .26s var(--ease), padding .26s var(--ease), opacity .2s var(--ease);
}
@media (hover: hover) {
    .social-rail__link:hover .social-rail__label,
    .social-rail__link:focus-visible .social-rail__label {
        max-width: 200px;
        padding: 0 14px;
        opacity: 1;
    }
}

/* Yan sütundaki ikinci blok, gruptan görsel olarak ayrılsın */
.side-nav--diger { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ============================================================
   AÇIK ALTBİLGİ
   ------------------------------------------------------------
   Altbilgi koyu zemine göre yazılmıştı; burada aynı yapı açık
   zemine çevrilir. Siyah logo beyaz zeminde doğal durduğu için
   arkasındaki plakaya da gerek kalmıyor.

   Koyu sürüme dönmek için: Ayarlar → Alt Bilgi → Altbilgi teması.
   ============================================================ */

.site-footer--acik {
    background: var(--surface);
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
}

.site-footer--acik .footer-title { color: var(--ink); }
.site-footer--acik .footer-links a,
.site-footer--acik .footer-contact a,
.site-footer--acik .footer-legal a { color: var(--ink-soft); }
.site-footer--acik .footer-links a:hover,
.site-footer--acik .footer-contact a:hover,
.site-footer--acik .footer-legal a:hover { color: var(--brand); }

.site-footer--acik .newsletter input {
    color: var(--ink);
    background: var(--bg-alt);
    border-color: var(--line);
}
.site-footer--acik .newsletter input::placeholder { color: var(--muted); }

.site-footer--acik .footer-social a {
    color: var(--social-fg, var(--ink-soft));
    background: var(--social-bg, var(--bg-alt));
}
.site-footer--acik .footer-social a:hover {
    color: var(--social-hover-fg, #fff);
    background: var(--social-hover-bg, var(--brand));
}

.site-footer--acik .footer-bottom,
.site-footer--acik .footer-strip { border-top-color: var(--line); }

.site-footer--acik .footer-credit { color: var(--muted); }
.site-footer--acik .footer-credit:hover { color: var(--ink-soft); }
/* DARCYN imzası açık zeminde ters çevrilir; beyaz sürümü kaybolmasın */
.site-footer--acik .footer-credit img { filter: invert(1) brightness(.35); opacity: .75; }
.site-footer--acik .footer-credit:hover img { opacity: 1; }

.site-footer--acik .footer-audit {
    background: var(--bg-alt);
    border-top-color: var(--line);
}
.site-footer--acik .footer-audit img { background: transparent; }
.site-footer--acik .footer-audit p { color: var(--muted); }
.site-footer--acik .footer-audit strong { color: var(--ink-soft); }

/*
 * Koyu temada açık altbilgi de koyulaşır: değişkenler zaten
 * yer değiştirdiği için ayrıca kural yazmaya gerek yok, yalnızca
 * DARCYN imzasının ters çevrilmesi geri alınır.
 */
:root[data-theme="dark"] .site-footer--acik .footer-credit img { filter: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-footer--acik .footer-credit img { filter: none; }
}

/* ============================================================
   KOYU TEMADA BAŞLIK VE ALTBİLGİ
   ------------------------------------------------------------
   İkisi de sayfanın geri kalanıyla aynı koyulukta kalıyor,
   birbirinden ayrılmıyordu. Bir ton daha açık lacivert veriliyor;
   değerler Renkler ekranından değiştirilebilir.
   ============================================================ */

:root[data-theme="dark"] .site-header--acik,
:root[data-theme="dark"] .site-header--koyu {
    background: var(--header-bg-dark, #28334d);
    border-bottom-color: rgba(255, 255, 255, .09);
}
:root[data-theme="dark"] .site-footer--acik,
:root[data-theme="dark"] .site-footer--koyu {
    background: var(--footer-bg-dark, #222c42);
    color: rgba(255, 255, 255, .8);
    border-top-color: rgba(255, 255, 255, .09);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header--acik,
    :root:not([data-theme="light"]) .site-header--koyu {
        background: var(--header-bg-dark, #28334d);
        border-bottom-color: rgba(255, 255, 255, .09);
    }
    :root:not([data-theme="light"]) .site-footer--acik,
    :root:not([data-theme="light"]) .site-footer--koyu {
        background: var(--footer-bg-dark, #222c42);
        color: rgba(255, 255, 255, .8);
        border-top-color: rgba(255, 255, 255, .09);
    }
}

/*
 * Açık altbilgi koyu temaya geçince yazıları da açılmalı:
 * --ink değişkenleri zaten yer değiştirdiği için başlıklar ve
 * bağlantılar kendiliğinden okunur kalıyor, yalnızca alt bantlar
 * ve bülten kutusu elle ayarlanıyor.
 */
:root[data-theme="dark"] .site-footer--acik .footer-audit,
:root[data-theme="dark"] .site-footer--acik .newsletter input,
:root[data-theme="dark"] .site-footer--acik .footer-social a {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .12);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-footer--acik .footer-audit,
    :root:not([data-theme="light"]) .site-footer--acik .newsletter input,
    :root:not([data-theme="light"]) .site-footer--acik .footer-social a {
        background: rgba(255, 255, 255, .07);
        border-color: rgba(255, 255, 255, .12);
    }
}


/* Bakanlık arması koyu zeminde kaybolmasın: beyaz daire geri gelir */
:root[data-theme="dark"] .site-footer--acik .footer-audit img { background: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-footer--acik .footer-audit img { background: #fff; }
}

/*
 * Sayaçlar koyu temada lacivert kalır: krem zemin, koyu sayfada
 * göz alırdı. Yönetimden bir renk seçilmişse o her koşulda geçerli.
 */
:root[data-theme="dark"] .section.section--stats {
    background: var(--stats-bg, var(--bg-dark));
    color: var(--stats-fg, #fff);
}
:root[data-theme="dark"] .stat__icon { background: var(--stats-icon-bg, rgba(255, 255, 255, .07)); }
:root[data-theme="dark"] .stat:hover .stat__icon { background: var(--stats-icon-hover-bg, rgba(255, 255, 255, .12)); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .section.section--stats {
        background: var(--stats-bg, var(--bg-dark));
        color: var(--stats-fg, #fff);
    }
    :root:not([data-theme="light"]) .stat__icon { background: var(--stats-icon-bg, rgba(255, 255, 255, .07)); }
    :root:not([data-theme="light"]) .stat:hover .stat__icon { background: var(--stats-icon-hover-bg, rgba(255, 255, 255, .12)); }
}

/* ------------------------------------------------------------
   İHTİYAÇ SEÇİMİ
   Afet anında liste taramak zor; kutular geniş ve dokunması
   kolay olsun diye etiket biçiminde duruyor.
   ------------------------------------------------------------ */
.need-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.need-picker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: .88rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.need-picker__item input { accent-color: var(--brand); width: 16px; height: 16px; }
.need-picker__item:hover { border-color: var(--brand); }
.need-picker__item:has(input:checked) {
    color: var(--brand);
    background: var(--brand-soft);
    border-color: var(--brand);
    font-weight: 600;
}

/* Logo kutusuz durur: çerçeve hem başlıkta hem altbilgide yama gibiydi */
.brand__box { display: flex; align-items: center; height: 100%; }
.footer__logo { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------
   İHTİYAÇ ÖN KONTROLÜ (yüzen panel)
   Karta basınca kartların yerine geçer; "Hayır" diyene form hiç
   açılmaz, iletişim sayfasına yönlendirilir.
   ------------------------------------------------------------ */
.need-gate {
    padding: 16px;
    text-align: center;
    background: var(--brand-soft);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
}
.need-gate__q { margin: 0 0 14px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.need-gate__actions { display: flex; gap: 10px; justify-content: center; }
.need-gate__no { margin-top: 14px; }
.need-gate__no p { margin: 0 0 12px; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }

/* Kapsam uyarısı: 112 uyarısından ayrılsın, ikisi üst üste gelmesin */
.notice--scope {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    background: var(--bg-alt);
    border-inline-start: 3px solid var(--muted);
    color: var(--ink-soft);
    font-size: .9rem;
}
.notice--scope a { font-weight: 600; color: var(--brand); white-space: nowrap; }

/* ============================================================
   TEMAYA GÖRE LOGO
   ------------------------------------------------------------
   Koyu tema için ayrı logo seçilmişse iki resim de basılır,
   görüneni CSS seçer — tema düğmesine basınca sunucuya sormadan
   yer değiştirir. Seçilmemişse ikinci resim hiç basılmaz ve bu
   kuralların hiçbiri devreye girmez.
   ============================================================ */

.brand__box--iki-tema .brand__logo--koyu,
.hero__logo-kutu--iki-tema .brand__logo--koyu,
.footer__logo--iki-tema .brand__logo--koyu { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand__box--iki-tema .brand__logo--acik,
    :root:not([data-theme="light"]) .hero__logo-kutu--iki-tema .brand__logo--acik,
    :root:not([data-theme="light"]) .footer__logo--iki-tema .brand__logo--acik { display: none; }
    :root:not([data-theme="light"]) .brand__box--iki-tema .brand__logo--koyu,
    :root:not([data-theme="light"]) .hero__logo-kutu--iki-tema .brand__logo--koyu,
    :root:not([data-theme="light"]) .footer__logo--iki-tema .brand__logo--koyu { display: block; }
}

:root[data-theme="dark"] .brand__box--iki-tema .brand__logo--acik,
:root[data-theme="dark"] .hero__logo-kutu--iki-tema .brand__logo--acik,
:root[data-theme="dark"] .footer__logo--iki-tema .brand__logo--acik { display: none; }
:root[data-theme="dark"] .brand__box--iki-tema .brand__logo--koyu,
:root[data-theme="dark"] .hero__logo-kutu--iki-tema .brand__logo--koyu,
:root[data-theme="dark"] .footer__logo--iki-tema .brand__logo--koyu { display: block; }

:root[data-theme="light"] .brand__box--iki-tema .brand__logo--acik,
:root[data-theme="light"] .hero__logo-kutu--iki-tema .brand__logo--acik,
:root[data-theme="light"] .footer__logo--iki-tema .brand__logo--acik { display: block; }
:root[data-theme="light"] .brand__box--iki-tema .brand__logo--koyu,
:root[data-theme="light"] .footer__logo--iki-tema .brand__logo--koyu { display: none; }

/* Uyarı kaynağı satırında sağlayıcı logosu */
.alert-opt__source { display: flex; align-items: center; gap: 10px; }
.alert-opt__source img { flex: 0 0 auto; width: 34px; height: auto; }

/*
 * Yalnızca çok dar cihazlarda tek sütuna dönülür. 375 px'lik
 * yaygın telefonlarda iki sütun rahat duruyor; sınırı oranın
 * altına koymak gerekiyor, yoksa kural hep devreye girer.
 */
@media (max-width: 339px) {
    .card-grid, .product-grid { grid-template-columns: 1fr; }
    .carousel__track--card .carousel__item { width: 80vw; }
}

/* ============================================================
   UYGULAMA ALT MENÜSÜ
   ------------------------------------------------------------
   Yalnızca uygulama içinde (ya da önizleme açıkken) görünür.
   Ortadaki öge kabarık durur: afet bildirimi her ekrandan tek
   dokunuşla ulaşılabilir olmalı.
   ============================================================ */

.app-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: end;
    /* Çentikli telefonlarda ekranın alt boşluğu kadar iç boşluk */
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
}

.app-nav__item {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 4px 2px;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
    transition: color .16s var(--ease);
}
.app-nav__item.is-active { color: var(--brand); font-weight: 600; }
.app-nav__icon svg { width: 23px; height: 23px; display: block; }

/*
 * Ortadaki düğme çubuğun üstüne taşar. Yükselen kısmın altında
 * çubuk zemini olmadığı için kendi zeminini ve gölgesini taşır.
 */
.app-nav__item--merkez {
    position: relative;
    color: #fff;
}
.app-nav__item--merkez .app-nav__icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    margin-top: -26px;
    color: #fff;
    background: var(--brand);
    border: 4px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(255, 6, 6, .35);
}
.app-nav__item--merkez .app-nav__icon svg { width: 24px; height: 24px; }
.app-nav__item--merkez .app-nav__label { color: var(--brand); font-weight: 700; }
.app-nav__item--merkez.is-active .app-nav__label { color: var(--brand); }

/* İçerik çubuğun altında kalmasın */
.has-app-nav { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

/*
 * Afet bildirimi artık çubuğun ortasında; sağ alttaki yüzen
 * düğme aynı işi ikinci kez yapıyordu, uygulama modunda gizlenir.
 * Yardım asistanı kalır, çubuğun üstüne itilir.
 */
.has-app-nav .fab--alert { display: none; }
.has-app-nav .fab { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.has-app-nav .cookie-bar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }

/* Geniş ekranda çubuk gerekmez: uygulama telefonda çalışır */
@media (min-width: 900px) {
    .app-nav { display: none; }
    .has-app-nav { padding-bottom: 0; }
    .has-app-nav .fab, .has-app-nav .cookie-bar { bottom: auto; }
    .has-app-nav .fab--alert { display: flex; }
}


/* ------------------------------------------------------------
   MOBİL UYGULAMA BÖLÜMÜ
   ------------------------------------------------------------ */
.section--app { background: var(--bg-alt); }
.app-promo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
}
.app-promo__title { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.app-promo__lead { margin: 0 0 22px; color: var(--ink-soft); max-width: 52ch; }
.app-promo__media img { display: block; width: min(280px, 40vw); height: auto; }

@media (max-width: 780px) {
    .app-promo { grid-template-columns: 1fr; text-align: center; }
    .app-promo__lead { margin-inline: auto; }
    .app-promo .app-badges__row { justify-content: center; }
    .app-promo__media { order: -1; justify-self: center; }
}

/* ============================================================
   ALTBİLGİ — TELEFON
   ------------------------------------------------------------
   Masaüstü düzeni telefonda alt alta dizilince altbilgi iki
   ekran boyuna çıkıyordu. Burada sıkıştırılır: bağlantı
   sütunları yan yana gelir, logo küçülür, boşluklar daralır.
   İçerikten bir şey çıkarılmaz; yalnızca sığdırılır.
   ============================================================ */

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 18px;
        padding: 30px 0 24px;
    }

    /* Marka sütunu tam genişlik; bağlantı sütunları ikişerli */
    .footer-col--brand { grid-column: 1 / -1; max-width: none; }

    /*
     * Yükseklik değişince genişlik de serbest kalmalı: işaretlemede
     * width="120" duruyor, sabit kalınca logo eziliyordu.
     */
    .footer-logo { height: 70px !important; width: auto; object-fit: contain; }

    /* Uzun tanıtım metni telefonda iki satırla yetinsin */
    .footer-about {
        margin: 10px 0 14px;
        font-size: .85rem;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .footer-title { margin-bottom: 10px; font-size: .74rem; }
    .footer-links, .footer-contact { gap: 7px; }
    .footer-links a, .footer-contact a, .footer-contact li { font-size: .85rem; }

    .footer-social { gap: 8px; margin-top: 14px; }
    .footer-social a { width: 36px; height: 36px; }

    .newsletter { margin-top: 18px; }
    .newsletter input { padding: 9px 14px; font-size: .88rem; }

    /* Alt bantlar: satır arası ve yazı küçülür */
    .footer-strip__inner { padding: 14px 0; gap: 12px; }
    .footer-bottom__inner { padding: 14px 0; font-size: .78rem; gap: 8px; }
    .footer-audit { padding: 10px 0; }
    .footer-audit__inner { gap: 8px; }
    .footer-audit img { width: 26px; height: 26px; }
    .footer-audit p { font-size: .72rem; }
    .footer-credit img { height: 24px; }
}

/* Çok dar ekranda bağlantı sütunları da alt alta iner */
@media (max-width: 379px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   KATLANAN ALTBİLGİ SÜTUNLARI
   Masaüstünde <details> hep açık ve ok görünmez; telefonda
   katlanır. Betik gerekmiyor, tarayıcının kendi davranışı.
   ------------------------------------------------------------ */
.footer-col--fold > summary {
    cursor: default;
    list-style: none;
}
.footer-col--fold > summary::-webkit-details-marker { display: none; }

@media (max-width: 640px) {
    .footer-col--fold {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(128, 128, 128, .18);
        padding-top: 12px;
    }
    .footer-col--fold > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
        padding: 4px 0;
        cursor: pointer;
    }
    /* Katlama oku: açıkken yukarı döner */
    .footer-col--fold > summary::after {
        content: "";
        width: 8px; height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform .2s var(--ease);
        opacity: .6;
    }
    .footer-col--fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
    .footer-col--fold[open] > summary { margin-bottom: 12px; }
    .footer-col--fold > ul { padding-bottom: 6px; }
}

/*
 * Dokunmatik cihazda üzerine gelmek diye bir şey yok: etiket
 * hiç açılmıyordu, kullanıcı simgenin ne olduğunu bilemiyordu.
 * Telefonda etiketler açık durur.
 */
@media (hover: none) {
    .social-rail--kisayol .social-rail__panel { width: auto; }

    .social-rail__panel .social-rail__link {
        /*
         * Ray ekranın sağ kenarına yapışık: etiket simgenin
         * sağına konursa ekran dışında kalır. Sıra ters çevrilir,
         * yazı içeri doğru uzar.
         */
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: auto;
        min-width: 52px;
        padding: 0 11px;
        height: 40px;
    }
    .social-rail__panel .social-rail__link .app-nav__label { display: none; }

    .social-rail__label {
        position: static;
        max-width: none;
        height: auto;
        padding: 0;
        background: none;
        color: inherit;
        opacity: 1;
        transform: none;
        font-size: .73rem;
        line-height: 1;
        white-space: nowrap;
        transition: none;
    }
    .social-rail__panel .social-rail__link:hover .social-rail__label { background: none; color: inherit; }
    .social-rail__panel .social-rail__theme { width: 100%; height: 40px; }

}

/*
 * Telefonda kart metinleri kısalır: üç satırdan sonrası kesilir.
 * Küçük ekranda uzun özet, kartı gereksiz uzatıyor ve listeyi
 * taramayı zorlaştırıyordu.
 */
@media (max-width: 640px) {
    .card__excerpt, .card__text, .product-card__excerpt, .event-card__excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card__title, .product-card__title, .event-card__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ------------------------------------------------------------
   YÜZEN DÜĞMELER — TELEFON
   Afet düğmesi telefonda köşenin epey yerini kaplıyordu:
   küçültüldü ve kapatılabilir yapıldı.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .fab__button { height: 42px; padding: 0 14px 0 11px; gap: 6px; }
    .fab__button--alert .fab__whistle { width: 19px; height: 19px; }
    .fab__button .fab__label { font-size: .72rem; letter-spacing: 0; }
    .fab__button--bot img { width: 22px; height: 22px; }
    /* Dikkat halkasi kucuk dugmede fazla buyuk duruyordu */
    .fab__button--alert::before { inset: -4px; }
}

/* ------------------------------------------------------------
   KISAYOL RAYI — AÇILIP KAPANMA
   Telefonda etiketler yer kaplıyor; kulp ile daraltılır.
   Geniş ekranda kulp yok, ray zaten dar.
   ------------------------------------------------------------ */
.social-rail__handle {
    display: none;
    place-items: center;
    width: 22px; height: 52px;
    padding: 0;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
    cursor: pointer;
    box-shadow: var(--shadow);
}
.social-rail__handle svg { transition: transform .26s var(--ease); }
.social-rail--kisayol.is-open .social-rail__handle svg { transform: rotate(180deg); }

@media (hover: none) {
    .social-rail__handle { display: grid; }

    /*
     * Telefonda ray ya tamamen açık ya tamamen kapalı.
     * Önceden kapalıyken simge genişliğinde bir şerit kalıyordu
     * ve içeriğin üstünü kapatmaya devam ediyordu. Artık kapalıyken
     * panel ekranın dışına kayar; geriye yalnızca ince kulp kalır.
     */
    .social-rail--kisayol .social-rail__panel {
        width: auto;
        transition: transform .28s var(--ease), opacity .2s var(--ease);
    }

    .social-rail--kisayol:not(.is-open) .social-rail__panel {
        /*
         * Kapalıyken panel akıştan çıkar: yoksa yer kaplamaya devam
         * ediyor ve kulp ekranın ortasında kalıyordu. Artık kulp
         * sağ kenara yaslanır.
         */
        position: absolute;
        inset-inline-end: 0;
        top: 0;
        transform: translateX(105%);
        opacity: 0;
        pointer-events: none;
    }

    .social-rail--kisayol.is-open .social-rail__panel {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    /*
     * Kapalı kulp, alttaki yardım düğmesiyle aynı ölçekte olsun.
     * 22x52 çok iriydi ve ekranın kenarında orantısız duruyordu.
     */
    .social-rail__handle { width: 18px; height: 44px; }
    .social-rail--kisayol:not(.is-open) .social-rail__handle {
        width: 16px;
        height: 38px;
        opacity: .8;
    }
    .social-rail__handle svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .social-rail--kisayol .social-rail__panel { transition: none; }
}

/* ------------------------------------------------------------
   SOSYAL GİRİŞ
   Anahtarı girilmemiş sağlayıcı hiç basılmaz; bu kurallar
   yalnızca açık olanlar için çalışır.
   ------------------------------------------------------------ */
.social-login { margin-top: 22px; }
.social-login__label {
    display: block;
    margin-bottom: 14px;
    text-align: center;
    font-size: .82rem;
    color: var(--muted);
    position: relative;
}
.social-login__label::before,
.social-login__label::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 92px);
    height: 1px;
    background: var(--line);
}
.social-login__label::before { left: 0; }
.social-login__label::after  { right: 0; }

.social-login__row { display: grid; gap: 10px; }
.social-login__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.social-login__btn:hover { border-color: var(--ink-soft); background: var(--surface-2); }
.social-login__btn svg { flex: 0 0 auto; }

/* ------------------------------------------------------------
   İNDİRİM KAMPANYASI — kart rozeti ve geri sayım
   ------------------------------------------------------------ */
.product-card__badge--kampanya {
    inset-inline-start: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}
/* İki rozet varsa oran rozeti alta iner, üst üste binmesin */
.product-card__badge--kampanya + .product-card__badge--oran { top: 44px; }

.product-card__countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 4px 10px;
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
    background: var(--brand-soft);
    border-radius: 999px;
}
.product-card__countdown.is-over { color: var(--muted); background: var(--surface-2); }

/* ============================================================
   ETKİNLİK BİLETİ
   Telefonda kapıda gösterilecek: QR büyük, kod okunaklı.
   Yazdırıldığında da aynı düzen çalışır.
   ============================================================ */
.ticket-intro { margin-bottom: 28px; }
.ticket-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ticket-facts li { display: flex; gap: 12px; font-size: .92rem; }
.ticket-facts strong { min-width: 130px; color: var(--muted); font-weight: 600; }
.ticket-terms { margin-top: 14px; }

.ticket {
    padding: clamp(20px, 4vw, 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow);
}
.ticket--used { opacity: .72; }

.ticket__head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.ticket__logo { flex: 0 0 auto; width: 70px; height: auto; }
.ticket__label { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.ticket__title { margin: 4px 0 0; font-size: clamp(1.15rem, 3vw, 1.5rem); line-height: 1.3; }

.ticket__qr { padding: 22px 0; text-align: center; }
.ticket__qr svg { width: min(240px, 62vw); height: auto; }
.ticket__code {
    margin: 12px 0 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

.ticket__meta { display: grid; gap: 10px; margin: 0; padding-top: 18px; border-top: 1px dashed var(--line); }
.ticket__meta > div { display: flex; flex-wrap: wrap; gap: 12px; font-size: .92rem; }
.ticket__meta dt { min-width: 110px; color: var(--muted); font-weight: 600; }
.ticket__meta dd { margin: 0; }

.ticket__status { display: inline-block; padding: 3px 12px; font-size: .8rem; font-weight: 700; border-radius: 999px; }
.ticket__status--gecerli    { color: var(--ok, #12805c); background: #e6f5ef; }
.ticket__status--kullanildi { color: var(--muted); background: var(--surface-2); }
.ticket__status--iptal      { color: var(--err); background: #fdecec; }

.ticket__terms { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--muted); }
.ticket__hint { margin: 20px 0; font-size: .9rem; color: var(--ink-soft); text-align: center; }
.ticket__actions { display: flex; gap: 10px; justify-content: center; }

/* Yazdırırken yalnızca bilet kalsın */
@media print {
    .site-header, .site-footer, .topbar, .social-rail, .fab, .app-nav,
    .ticket__actions, .ticket__hint, .announcement-bar { display: none !important; }
    .ticket { border: 1px solid #000; box-shadow: none; }
}

/* ============================================================
   MOBİL MENÜ — AÇIK BAŞLIK TEMASI
   ------------------------------------------------------------
   Menü paneli açık temada beyaz; oradaki yazılar ve ok beyaz
   kaldığı için görünmüyordu. Ayrıca ok artık bağlantının
   kardeşi: satır iki parçaya bölündü.
   ============================================================ */

.main-nav__row { display: flex; align-items: center; }
.main-nav__row .main-nav__link { flex: 1; min-width: 0; }

@media (max-width: 1400px) {
    /* Ok, bağlantının yanında ve dokunması kolay */
    .main-nav__caret { flex: 0 0 auto; margin-inline-end: 4px; }

    /* Açık temada panel beyaz: yazılar ve ok koyu olmalı */
    .site-header--acik .main-nav__link { color: var(--ink); }
    .site-header--acik .main-nav__link:hover,
    .site-header--acik .main-nav__link.active { background: var(--surface-2); color: var(--brand); }

    .site-header--acik .main-nav__caret {
        color: var(--ink-soft);
        background: var(--surface-2);
    }
    .site-header--acik .main-nav__caret:hover { background: var(--brand-soft); color: var(--brand); }

    .site-header--acik .main-nav__head { border-bottom-color: var(--line); }
    .site-header--acik .main-nav__title { color: var(--ink); }
    .site-header--acik .main-nav__close { color: var(--ink); }

    /* Alt sayfalar: çizgi ve yazı rengi açık zemine göre */
    .site-header--acik .submenu { border-inline-start-color: var(--line); }
    .site-header--acik .submenu a { color: var(--ink-soft); }
    .site-header--acik .submenu a:hover { background: var(--brand-soft); color: var(--brand); }

    /*
     * Alt menü yüksekliği: 520 px, uzun listelerde (Hakkımızda'da
     * altı sayfa var) son maddeleri kırpıyordu.
     */
    .main-nav__item.is-open > .submenu { max-height: 900px; }
}

/* Ray nerede görünsün: yönetimden seçilir */
@media (max-width: 900px)  { .social-rail--masaustu { display: none; } }
@media (min-width: 901px)  { .social-rail--mobil { display: none; } }

/* ============================================================
   SLIDER — "KÖŞE" GÖRÜNÜMÜ
   ------------------------------------------------------------
   Görsel tam sayfa; üzerine çapraz kesilmiş beyaz bir alan
   biner ve yazı o alanda, sağ altta durur. Kesim clip-path ile
   çizilir: ayrı görsel gerekmez, her ekranda keskin kalır.

   Telefonda çapraz yatıklaşır, beyaz alan alta iner ve yazı
   ortalanır — dar ekranda sağa yaslı yazı sıkışıyor.
   ============================================================ */

/* Görsel olduğu gibi görünsün: yazı kendi beyaz alanında */
/*
 * Köşe sürümünde görsel her zaman alanı doldurur. Slayt ayarında
 * "sığdır" seçiliyse görselin yanında koyu bant kalıyordu; burada
 * tasarım alanını zaten beyaz köşegen kapattığı için kırpmak sorun değil.
 */
.hero--kose .hero__slide .hero__media { background: none; }
.hero--kose .hero__slide .hero__media img { object-fit: cover; }

.hero--kose .hero__overlay {
    background: linear-gradient(90deg, rgba(11, 15, 26, .34) 0%, rgba(11, 15, 26, .06) 55%, transparent 100%);
}

/*
 * Çapraz beyaz alan: sağ kenarda dar bir panel, sol kenarı eğik.
 * Üçgen denendi ama yazı sağa hizalı olduğu için üçgenin geniş
 * orta bölgesi boş kalıyordu; panel yazıyı sarınca boşluk bitti.
 */
.hero--kose .hero__wedge {
    position: absolute;
    inset: 0;
    background: var(--hero-wedge, var(--surface));
    clip-path: polygon(86% 0, 100% 0, 100% 100%, 68% 100%);
    z-index: 1;
}

.hero--kose .hero__content {
    position: relative;
    z-index: 2;
    justify-self: end;
    align-self: end;
    /*
     * Yazı üçgenin içinde kalmalı: üçgen aşağı doğru genişlediği
     * için blok alta yaslanır ve dar tutulur. Sağdaki ok yazının
     * üstüne binmesin diye o taraftan geniş boşluk bırakılır.
     */
    width: min(30%, 420px);
    max-width: none;
    margin-inline: 0;
    padding-inline: 0 clamp(34px, 3vw, 56px);
    padding-bottom: clamp(22px, 4vh, 46px);
    /* Yazı beyaz alanda: koyu mürekkep */
    color: var(--ink) !important;
    text-align: end;
}

.hero--kose .hero__logo { margin-inline-start: auto; margin-bottom: 10px; max-height: 11vh; }
.hero--kose .hero__subtitle { justify-content: flex-end; margin-bottom: 8px; color: var(--brand); }
.hero--kose .hero__subtitle::before { display: none; }

.hero--kose .hero__title {
    color: var(--ink);
    font-size: calc(clamp(1.4rem, 2.6vw, 2.3rem) * var(--hs));
    line-height: 1.08;
    letter-spacing: -.02em;
    text-shadow: none;
    margin-bottom: 12px;
}
.hero--kose .hero__text {
    color: var(--ink-soft);
    font-size: calc(clamp(.9rem, 1.25vw, 1.04rem) * var(--hs));
    max-width: 30ch;
    margin-inline-start: auto;
    margin-bottom: 14px;
    opacity: 1;
}
.hero--kose .hero__actions { justify-content: flex-end; }
.hero--kose .hero__actions .btn { padding: 11px 24px; border-radius: 999px; font-size: .88rem; }

/*
 * Oklar: iki yanda, yuvarlak ve büyük.
 * Sol ok görselin üzerinde durduğu için koyu, sağ ok beyaz
 * alanda durduğu için marka renginde — ikisi de zeminden ayrılır.
 */
.hero--kose .hero__arrow {
    /*
     * İkisi de görselin üzerinde yan yana: panel daraldığı için
     * sağdaki ok logoya/başlığa biniyordu, dikey orta da başlığa denk geliyor.
     */
    top: auto;
    bottom: clamp(18px, 4vh, 38px);
    transform: none;
    width: clamp(44px, 3.4vw, 56px);
    height: clamp(44px, 3.4vw, 56px);
    border: 0;
    backdrop-filter: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.hero--kose .hero__arrow--prev {
    left: clamp(12px, 3vw, 46px);
    color: #fff;
    background: rgba(31, 42, 68, .62);
}
.hero--kose .hero__arrow--prev:hover { background: rgba(31, 42, 68, .85); }
.hero--kose .hero__arrow--next {
    right: auto;
    left: calc(clamp(12px, 3vw, 46px) + clamp(44px, 3.4vw, 56px) + 14px);
    color: #fff;
    background: var(--brand);
}
.hero--kose .hero__arrow--next:hover { background: var(--brand-dark); }

/* Noktalar beyaz alanın altında, sağda */
.hero--kose .hero__dots {
    left: auto;
    right: clamp(64px, 5vw, 96px);
    bottom: 18px;
    transform: none;
}
.hero--kose .hero__dots button { width: 24px; height: 3px; border-radius: 2px; background: rgba(31, 42, 68, .25); }
.hero--kose .hero__dots button.is-active { width: 42px; background: var(--brand); }

@media (max-width: 900px) {
    /*
     * Çapraz yatıklaşır ve yukarı çıkar: telefonda yazı yığını
     * (logo + başlık + metin + düğme) uzun; beyaz alan dar kalırsa
     * logo ve üst satırlar fotoğrafın üstüne taşıp okunmuyordu.
     */
    .hero--kose .hero__wedge {
        clip-path: polygon(100% 20%, 100% 100%, 0 100%, 0 90%);
    }

    .hero--kose .hero__content {
        justify-self: stretch;
        width: auto;
        padding-inline: clamp(18px, 6vw, 32px);
        padding-bottom: 30px;
        text-align: end;
    }
    .hero--kose .hero__logo { margin-inline: auto 0; }
    .hero--kose .hero__subtitle { justify-content: flex-end; }
    .hero--kose .hero__text { margin-inline: auto 0; }
    .hero--kose .hero__actions { justify-content: flex-end; }

    .hero--kose .hero__dots { left: auto; right: clamp(18px, 6vw, 32px); transform: none; }

    /* Telefonda görselin üstünde iki yana: alt köşeler yazıya ait */
    .hero--kose .hero__arrow { top: 42%; bottom: auto; }
    .hero--kose .hero__arrow--next { left: auto; right: clamp(12px, 3vw, 46px); }

    /*
     * Yazı yığını derli toplu: fotoğrafa ekranın yaklaşık yarısı kalsın.
     * Daha büyük ölçülerde blok 460px'lik alanın %70'ini yiyip
     * fotoğraftan geriye ince bir şerit bırakıyordu.
     */
    .hero--kose .hero__logo { max-height: 5vh; margin-bottom: 6px; }
    .hero--kose .hero__subtitle { margin-bottom: 6px; font-size: .72rem; }
    .hero--kose .hero__title { margin-bottom: 10px; font-size: calc(clamp(1.3rem, 5.8vw, 1.8rem) * var(--hs)); }
    .hero--kose .hero__text { max-width: 26ch; margin-bottom: 12px; font-size: calc(.82rem * var(--hs)); }
    .hero--kose .hero__actions .btn { padding: 9px 20px; font-size: .82rem; }
}

/*
 * Sayfa açılırken zaten ekranda olan sayaç: animasyonsuz yerine
 * oturur. Yenilemede simgelerin dağılıp toplanması bundandı.
 */
html.js .stat.is-instant .stat__icon,
html.js .stat.is-instant .stat__value,
html.js .stat.is-instant .stat__label { transition: none; }

/* ============================================================
   TELEFON — YAZI ÖLÇÜLERİ
   ------------------------------------------------------------
   Masaüstü için yazılan boyutlar telefonda sayfayı gereksiz
   uzatıyordu. Buradaki küçültmeler yalnızca dar ekranda geçerli.
   ============================================================ */

@media (max-width: 640px) {
    /* Bölüm başlıkları ve açıklamaları */
    .section__title { font-size: clamp(1.25rem, 5.5vw, 1.6rem); }
    .section__subtitle { font-size: .88rem; }
    .section__head { margin-bottom: 20px; }

    /* Ana sayfadaki tanıtım metni: masaüstünde uzun, telefonda kısa */
    .intro__text { font-size: .95rem; }
    .intro { gap: 16px; }

    /* Haber şeridi */
    .ticker__label { font-size: .56rem; padding: 0 9px; letter-spacing: .08em; }
    .ticker__item { font-size: .76rem; }
    .ticker__ext { font-size: .72rem; }

    /* Kart içi */
    .card__date, .card__meta { font-size: .74rem; }
    .card__more { font-size: .82rem; }

    /* Sayfa başlıkları */
    .page-hero__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    .page-hero__lead { font-size: .9rem; }
}

/*
 * Telefonda altbilgi satırları: yazılar alt alta dizilip
 * uzuyordu. Satır aralığı ve boşluklar sıkıştırıldı.
 */
@media (max-width: 640px) {
    .footer-audit__inner { flex-direction: row; text-align: start; gap: 10px; }
    .footer-audit p { font-size: .7rem; line-height: 1.45; }
    .footer-audit span { display: block; margin-inline-start: 0; margin-top: 2px; }

    .footer-bottom__inner { flex-direction: column; gap: 6px; text-align: center; }
    .footer-copy { font-size: .74rem; }
    .footer-legal { justify-content: center; gap: 6px; font-size: .74rem; }
    .footer-credit { font-size: .7rem; }

    .footer-strip__inner { flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; }
    .footer-contact li { line-height: 1.5; }
    .footer-links a, .footer-contact a { line-height: 1.5; }
}

/* Bağış: dış platforma yönlendirme kartı */
.donation-external {
    padding: clamp(24px, 4vw, 40px);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 16px);
}
.donation-external h2 { margin: 0 0 10px; }
.donation-external p { margin: 0 0 22px; color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }
.donation-external__host { margin: 18px 0 0 !important; font-size: .82rem; color: var(--muted); }
.donation-external__host code { padding: 2px 8px; background: var(--bg-alt); border-radius: 5px; }

/* ------------------------------------------------------------
   BİLDİRİM MERKEZİ
   ------------------------------------------------------------ */
.notify-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.notify-head h2 { margin: 0; }

.notify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notify-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.notify-item.is-unread { border-inline-start: 3px solid var(--brand); background: var(--brand-soft); }

.notify-item__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    font-weight: 800;
    border-radius: 50%;
    color: #fff;
    background: var(--ink-soft);
}
.notify-item__icon--afet     { background: var(--brand); }
.notify-item__icon--kampanya { background: #b45309; }
.notify-item__icon--siparis  { background: #12805c; }
.notify-item__icon--bilet    { background: #2563eb; }

.notify-item__body { flex: 1; min-width: 0; }
.notify-item__body strong { display: block; margin-bottom: 4px; }
.notify-item__body p { margin: 0 0 6px; font-size: .9rem; color: var(--ink-soft); }
.notify-item__body time { font-size: .76rem; color: var(--muted); }

.notify-item__actions { display: flex; align-items: center; gap: 8px; }
.notify-item__del {
    width: 30px; height: 30px;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.notify-item__del:hover { color: var(--err); background: var(--surface-2); }

/* Mobil menüdeki bildirim rozeti */
.main-nav__notify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--brand-soft);
    border-radius: var(--radius);
    color: var(--brand);
    font-weight: 600;
}
.main-nav__notify-count {
    display: grid;
    place-items: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    font-size: .74rem;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}

/* Bildirim satırı yalnızca dar ekrandaki açılır menüde görünür */
@media (min-width: 1401px) { .main-nav__notify { display: none; } }

/* Biletli etkinlik işareti */
.badge--bilet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #2563eb;
    color: #fff;
}

/* ------------------------------------------------------------
   DİJİTAL CÜZDAN
   Kullanıldığında bilet solar: kişi hangisini kullandığını
   karıştırmasın.
   ------------------------------------------------------------ */
.wallet-lead { margin-bottom: 22px; color: var(--ink-soft); }

.wallet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wallet-card {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 16px);
}
.wallet-card.is-passive { opacity: .55; }
.wallet-card.is-passive .wallet-card__qr { filter: grayscale(1); }

.wallet-card__qr { flex: 0 0 auto; }
.wallet-card__qr svg { width: 118px; height: auto; border-radius: 8px; }

.wallet-card__body { flex: 1; min-width: 200px; }
.wallet-card__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.wallet-card__title { margin: 4px 0 6px; font-size: 1.05rem; }
.wallet-card__code { margin: 0 0 10px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.wallet-card__meta { display: grid; gap: 5px; margin: 0 0 12px; font-size: .86rem; }
.wallet-card__meta > div { display: flex; gap: 10px; }
.wallet-card__meta dt { min-width: 70px; color: var(--muted); font-weight: 600; }
.wallet-card__meta dd { margin: 0; }

.wallet-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 520px) {
    .wallet-card { gap: 12px; }
    .wallet-card__qr svg { width: 92px; }
}

/* ------------------------------------------------------------
   ÇEREZ ONAYI — AYRINTILI
   ------------------------------------------------------------ */
.cookie-bar { flex-direction: column; align-items: stretch; gap: 0; }
.cookie-bar__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.cookie-bar__main p { margin: 0; flex: 1; min-width: 220px; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; }

.cookie-bar__detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(128, 128, 128, .25);
}

.cookie-groups { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.cookie-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-group p { margin: 4px 0 0; font-size: .82rem; opacity: .8; line-height: 1.5; }
.cookie-group__fixed { font-size: .78rem; opacity: .7; }

.cookie-group .switch { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }
.cookie-group .switch input { width: 17px; height: 17px; accent-color: var(--brand); }

.cookie-bar__link { font-size: .82rem; text-decoration: underline; opacity: .85; margin-inline-end: auto; }

/* Sonradan tercih değiştirme düğmesi */
.cookie-reopen {
    position: fixed;
    inset-inline-start: 14px;
    bottom: 14px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: .76rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    opacity: .75;
}
.cookie-reopen:hover { opacity: 1; }

/* Yardım düğmesi de sol altta: çakışmasın */
.has-fab-left .cookie-reopen { bottom: 76px; }

@media (max-width: 640px) {
    /*
     * Telefonda sag altta afet dugmesiyle ve yan rayla ust uste
     * biniyordu: sol alta, yardim dugmesinin ustune alindi ve
     * yalnizca simge birakildi.
     */
    .cookie-reopen {
        inset-inline-start: 12px;
        inset-inline-end: auto;
        bottom: 12px;
        font-size: 0;
        gap: 0;
        padding: 9px;
        opacity: .9;
    }
    .cookie-reopen svg, .cookie-reopen img { width: 16px; height: 16px; }
    .has-fab-left .cookie-reopen { bottom: 66px; }
    .cookie-bar__main { flex-direction: column; align-items: stretch; }
    .cookie-bar__actions { justify-content: stretch; }
    .cookie-bar__actions .btn { flex: 1; }
}

/* ==========================================================================
   YUKARI ÇIK
   Bir ekran boyu aşağı inildiğinde sağ altta belirir. Yan ray ve afet
   düğmesiyle çakışmaması için onların üstünde durur.
   ========================================================================== */
.scroll-top {
    position: fixed;
    inset-inline-end: 16px;
    bottom: 84px;
    z-index: 190;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), background .18s var(--ease);
}
/* Görünmezken dokunuşları yutmasın: altındaki düğmelere basılamıyordu */
.scroll-top { pointer-events: none; }
.scroll-top.is-on { opacity: .92; transform: none; pointer-events: auto; }
.scroll-top:hover { opacity: 1; background: var(--bg-alt); }

/* Yan ray açıkken rayın soluna kayar */
.has-rail .scroll-top { inset-inline-end: 64px; }

@media (max-width: 640px) {
    .scroll-top { width: 38px; height: 38px; bottom: 64px; inset-inline-end: 12px; }
    .has-rail .scroll-top { inset-inline-end: 12px; bottom: 108px; }
}

/* Uygulama sürümünde alt çubuğun üstünde kalsın */
.has-app-nav .scroll-top { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce) {
    .scroll-top { transition: none; }
}

/* Yukarı çık düğmesinin eşiği: sayfanın başındaki görünmez işaret */
.scroll-top__isaret {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 90vh;
    pointer-events: none;
    visibility: hidden;
}

/* ==========================================================================
   KOYU TEMA TONU
   Varsayilan "mat": Apple ve Claude'un kullandigi gibi nötr, mat açık
   siyah. Lacivert isteyen yönetimden seçer. Renkler yine de tek tek
   değiştirilebilir; buradaki değerler yalnızca başlangıç tonudur.
   ========================================================================== */
/*
 * DİKKAT: iki kural ayrı yazılmalı.
 * ":not([data-theme=light])" tek başına AÇIK temada da eşleşir;
 * ikisini virgülle birleştirmek koyu renkleri açık temaya da
 * uyguluyordu (başlıktaki yazılar okunmaz oluyordu).
 * Sistem teması yalnızca medya sorgusunun içinde geçerlidir.
 */
:root[data-tone="mat"][data-theme="dark"] {
    --ink:        #f2f2f2;
    --ink-soft:   #c9c9c9;
    --muted:      #8f8f8f;
    --line:       #2e2e2e;

    --bg:         #131313;
    --bg-alt:     #191919;
    --surface:    #1c1c1c;
    --surface-2:  #242424;
    --bg-dark:    #0e0e0e;

    --header-bg-dark: #1a1a1a;
    --footer-bg-dark: #131313;
}

@media (prefers-color-scheme: dark) {
    :root[data-tone="mat"]:not([data-theme="light"]) {
        color-scheme: dark;
        --ink:        #f2f2f2;
        --ink-soft:   #c9c9c9;
        --muted:      #8f8f8f;
        --line:       #2e2e2e;

        --bg:         #131313;
        --bg-alt:     #191919;
        --surface:    #1c1c1c;
        --surface-2:  #242424;
        --bg-dark:    #0e0e0e;

        --header-bg-dark: #1a1a1a;
        --footer-bg-dark: #131313;
    }
}

/* ==========================================================================
   TÜRKİYE HARİTASI — gölge ve seçim vurgusu
   Seçilen il hafifçe büyür, beyaz konturu ve gölgesiyle diğerlerinden
   ayrılır. Dokunmatikte de aynı animasyon çalışır.
   ========================================================================== */
.tr-map__svg {
    filter: drop-shadow(0 12px 26px rgba(20, 28, 47, .18));
}

.tr-map__path {
    /* Yüzde ile ölçekleme yolun kendi kutusuna göre yapılsın */
    transform-box: fill-box;
    transform-origin: center;
    transition:
        fill .18s var(--ease),
        filter .18s var(--ease),
        transform .24s cubic-bezier(.2, .85, .3, 1);
}

.tr-map__path:hover,
.tr-map__path:focus-visible,
.tr-map__path.is-active {
    transform: scale(1.05);
}

.tr-map__path.is-active {
    stroke: #fff;
    stroke-width: 1.4;
    paint-order: stroke;
    filter: drop-shadow(0 8px 16px rgba(20, 28, 47, .5));
}

/* Küçük iller orantısız büyümesin */
.tr-map__path.is-active[data-kucuk="1"] { transform: scale(1.12); }

.tr-map__path.is-disabled:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .tr-map__path { transition: fill .18s linear; }
    .tr-map__path:hover, .tr-map__path.is-active { transform: none; }
}

/* ==========================================================================
   HİKAYE ŞERİDİ VE CANLI YAYIN
   Başlığın hemen altında durur. Yalnızca dernek paylaşır.
   ========================================================================== */
.story-bar {
    position: relative;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.story-bar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 12px;
}
.story-bar__list {
    display: flex;
    gap: 16px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.story-bar__list::-webkit-scrollbar { display: none; }

.story-bar.is-kapali .story-bar__list { display: none; }
.story-bar.is-kapali .story-bar__inner { padding-block: 4px; }
.story-bar.is-kapali .story-bar__kulp svg { transform: rotate(180deg); }

.story {
    flex: 0 0 auto;
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 72px;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    scroll-snap-align: start;
}
.story__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 3px;
    /* Okunmamış hikaye halkası */
    background: conic-gradient(from 210deg, var(--brand), #f7b733, var(--brand));
}
.story__ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--bg-alt);
}
.story.is-gorulmus .story__ring { background: var(--line); }

.story__ad {
    max-width: 100%;
    font-size: .68rem;
    line-height: 1.2;
    text-align: center;
    color: var(--ink-soft);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Canlı yayın rozeti */
.story--canli .story__ring { background: var(--brand); animation: canli-nabiz 1.8s ease-in-out infinite; }
.story__canli-etiket {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 7px;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    background: var(--brand);
    border: 1.5px solid var(--surface);
    border-radius: 999px;
}
@keyframes canli-nabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 6, 6, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 6, 6, 0); }
}

.story-bar__kulp {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--muted);
    background: var(--bg-alt);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}
.story-bar__kulp svg { transition: transform .2s var(--ease); }

/* ---------------------------------------------------- Hikaye göstericisi */
.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: rgba(8, 10, 16, .94);
}
.story-viewer__cerceve {
    position: relative;
    width: min(420px, 100vw);
    height: min(92vh, calc(min(420px, 100vw) * 16 / 9));
    background: #000;
    border-radius: 14px;
    overflow: hidden;
}
.story-viewer__sahne { width: 100%; height: 100%; }
.story-viewer__sahne img,
.story-viewer__sahne video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.story-viewer__cubuklar {
    position: absolute;
    inset-inline: 10px;
    top: 10px;
    z-index: 3;
    display: flex;
    gap: 4px;
}
.story-viewer__cubuk {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    overflow: hidden;
}
.story-viewer__cubuk i { display: block; height: 100%; width: 0; background: #fff; }
.story-viewer__cubuk.is-bitti i { width: 100%; }

.story-viewer__kapat {
    position: absolute;
    top: 16px;
    inset-inline-end: 12px;
    z-index: 4;
    width: 34px;
    height: 34px;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.story-viewer__yon {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 34%;
    font-size: 0;
    color: transparent;
    background: none;
    border: 0;
    cursor: pointer;
}
.story-viewer__yon--geri  { inset-inline-start: 0; }
.story-viewer__yon--ileri { inset-inline-end: 0; width: 66%; }

.story-viewer__link {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

@media (max-width: 640px) {
    .story { width: 64px; }
    .story__ring { width: 54px; height: 54px; }
    .story-viewer__cerceve { width: 100vw; height: 100dvh; border-radius: 0; }
}

/* ==========================================================================
   AÇILIR PENCERE
   ========================================================================== */
.popup {
    position: fixed;
    inset: 0;
    z-index: 350;
    display: grid;
    padding: clamp(14px, 4vw, 34px);
    background: rgba(10, 14, 22, .6);
}
.popup--orta    { place-items: center; }
.popup--ust     { place-items: start center; }
.popup--alt     { place-items: end center; }
.popup--sag-alt { place-items: end; justify-items: end; background: none; pointer-events: none; }
.popup--sol-alt { place-items: end; justify-items: start; background: none; pointer-events: none; }
.popup--sag-alt .popup__kutu,
.popup--sol-alt .popup__kutu { pointer-events: auto; }

.popup__kutu {
    position: relative;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow: auto;
    color: var(--popup-fg, var(--ink));
    background: var(--popup-bg, var(--surface));
    box-shadow: var(--shadow-lg);
}
.popup--sag-alt .popup__kutu,
.popup--sol-alt .popup__kutu { width: min(360px, 100%); }

.popup--kose-kare     .popup__kutu { border-radius: 0; }
.popup--kose-yumusak  .popup__kutu { border-radius: 14px; }
.popup--kose-yuvarlak .popup__kutu { border-radius: 26px; }

.popup--cerceve-yok   .popup__kutu { border: 0; box-shadow: none; }
.popup--cerceve-ince  .popup__kutu { border: 1px solid var(--line); }
.popup--cerceve-kalin .popup__kutu { border: 4px solid var(--line); }
.popup--cerceve-marka .popup__kutu { border: 3px solid var(--brand); }

.popup__gorsel { display: block; }
.popup__gorsel img { width: 100%; height: auto; display: block; }

.popup__govde { padding: clamp(18px, 3vw, 28px); }
.popup__baslik { margin: 0 0 10px; font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
.popup__yazi { font-size: .94rem; }
.popup__dugme { margin-top: 16px; }

.popup__kapat {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}

/* ==========================================================================
   SIKÇA SORULAN SORULAR VE REFERANSLAR
   ========================================================================== */
.sss__kategori { margin-top: 34px; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.sss { display: grid; gap: 10px; margin-bottom: 8px; }

.sss__oge {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.sss__soru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 18px;
    font-family: var(--font-head);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--brand);
}
.sss__oge[open] .sss__soru::after { content: '–'; }
.sss__oge[open] .sss__soru { border-bottom: 1px solid var(--line); }
.sss__cevap { padding: 14px 18px 18px; font-size: .94rem; }

.sss__iletisim {
    margin-top: 34px;
    padding: 22px;
    text-align: center;
    background: var(--bg-alt);
    border-radius: 14px;
}
.sss__iletisim p { margin: 0 0 12px; color: var(--ink-soft); }

.referanslar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
.referans { display: grid; gap: 6px; justify-items: center; text-align: center; }
.referans__ic {
    display: grid;
    place-items: center;
    width: 100%;
    height: 84px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.referans__ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.referans__not { font-size: .74rem; color: var(--muted); font-style: normal; }

/* ==========================================================================
   CANLI YAYIN
   ========================================================================== */
.yayin__duzen { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 320px; }
.yayin__sahne { position: relative; min-width: 0; }

.yayin__video {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
}
.yayin__video iframe,
.yayin__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.yayin__rozet {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 2;
    padding: 3px 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.yayin__baslik { margin: 16px 0 8px; font-size: clamp(1.2rem, 2.4vw, 1.7rem); }

.yayin__yorumlar {
    display: flex;
    flex-direction: column;
    max-height: 68vh;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.yayin__yorum-baslik {
    margin: 0;
    padding: 13px 16px;
    font-size: .86rem;
    border-bottom: 1px solid var(--line);
}
.yorum-akis {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 12px 16px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
    align-content: start;
}
/* Instagram düzeni: ad ve yorum aynı satırda akar */
.yorum { font-size: .86rem; line-height: 1.45; }
.yorum strong { margin-inline-end: 6px; font-weight: 600; }
.yorum span { color: var(--ink-soft); }

.yorum-form {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
}
.yorum-form input { flex: 1; min-width: 0; }

.yayin-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}
.yayin-kart {
    position: relative;
    display: grid;
    gap: 6px;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}
.yayin-kart img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.yayin-kart strong { padding: 0 14px; font-size: .94rem; }
.yayin-kart span { padding: 0 14px 14px; font-size: .76rem; color: var(--muted); }
.yayin-kart__rozet {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    padding: 3px 9px;
    font-size: .64rem;
    font-weight: 800;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.yayin-liste { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.yayin-liste li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.yayin-liste span { color: var(--muted); font-size: .82rem; }

@media (max-width: 900px) {
    .yayin__duzen { grid-template-columns: 1fr; }
    .yayin__yorumlar { max-height: 52vh; }
}

/* Telefonda yapışkan tuşlar komple gizlenebilir (yönetimden seçilir) */
@media (max-width: 900px) {
    .social-rail--mobil-gizli { display: none !important; }
}
@media (max-width: 640px) {
    .fab--mobil-gizli { display: none !important; }
}

/* Kampanya ilerlemesi: kalan tutar ve süre vurgusu */
.campaign-progress__kalan { color: var(--brand); }
.campaign-progress__sure {
    padding: 2px 10px;
    font-size: .78rem;
    background: var(--bg-alt);
    border-radius: 999px;
}

/* ==========================================================================
   KENDİ KAMPANYANI BAŞLAT — neden kartları
   ========================================================================== */
.neden-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}
.neden {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px 22px;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.neden:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow);
}
.neden__simge {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    color: var(--brand);
    background: var(--brand-soft, rgba(255, 6, 6, .08));
    border-radius: 13px;
}
.neden strong { font-family: var(--font-head); font-size: 1.02rem; }
.neden span { font-size: .88rem; color: var(--ink-soft); line-height: 1.55; }
.neden em { margin-top: 4px; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
    .neden, .neden:hover { transform: none; transition: none; }
}

/* ==========================================================================
   BİRLİKTE AL VE SPONSORLU ALAN
   ========================================================================== */
.birlikte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.birlikte__oge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.birlikte__urun { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; color: inherit; }
.birlikte__urun img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
.birlikte__urun span { font-size: .94rem; }

.birlikte__fiyat { display: flex; align-items: baseline; gap: 8px; }
.birlikte__fiyat s { color: var(--muted); font-size: .84rem; }
.birlikte__fiyat strong { color: var(--brand); font-size: 1.06rem; }
.birlikte__fiyat em {
    padding: 2px 9px;
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
}
.birlikte__oge form { margin: 0; }

.sponsor-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.sponsor {
    position: relative;
    display: grid;
    gap: 6px;
    padding: 18px;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.sponsor img { width: 100%; max-height: 150px; object-fit: contain; }
.sponsor strong { font-size: .98rem; }
.sponsor span { color: var(--brand); font-weight: 600; }

/* Reklam olduğu açıkça yazsın */
.sponsor__etiket {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    padding: 2px 9px;
    font-size: .64rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg-alt);
    border-radius: 999px;
}

@media (max-width: 640px) {
    .birlikte__oge { gap: 10px; }
    .birlikte__urun { min-width: 140px; }
}

/* Üst şerit: duyuru simgesi ve sağ serbest alan */
.topbar__note { display: inline-flex; align-items: center; gap: 6px; }
.topbar__note-icon { flex: 0 0 auto; opacity: .85; }
.topbar__extra { margin-inline-start: 14px; }

@media (max-width: 640px) {
    /* Telefonda simge kalsın, metin kısalsın */
    .topbar__note span {
        display: inline-block;
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar__extra { display: none; }
}

/* ==========================================================================
   ÇAĞRI BLOĞU — solda uygulama rozetleri
   ========================================================================== */
.cta--uygulamali {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
    text-align: start;
}
.cta--uygulamali .cta__govde { text-align: center; }
.cta__uygulama { flex: 0 0 auto; }


@media (max-width: 900px) {
    /* Telefonda alt alta: rozetler yazının altında */
    .cta--uygulamali {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 22px;
    }
    .cta--uygulamali .cta__uygulama { order: 2; }
}

/* ==========================================================================
   UYGULAMA ROZETLERİ — telefonda yan yana ve eşit boyut
   Rozetler alt alta düşüyor ve genişlikleri farklı oluyordu; ikisi de
   aynı boyda, yan yana dursun.
   ========================================================================== */
@media (max-width: 640px) {
    .app-badges__row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .app-badge {
        justify-content: center;
        gap: 7px;
        padding: 9px 8px;
        min-height: 46px;
    }
    .app-badge svg { flex: 0 0 auto; width: 19px; height: 19px; }
    .app-badge__text small { font-size: .6rem; }
    .app-badge__text strong { font-size: .8rem; white-space: nowrap; }
}

/* Çok dar ekranda yazılar sığmazsa yalnızca mağaza adı kalsın */
@media (max-width: 360px) {
    .app-badge__text small { display: none; }
}

/* Hikaye şeridi yalnızca telefonda (yönetimden kapatılabilir) */
@media (min-width: 901px) {
    .story-bar--mobil { display: none; }
}

/* ==========================================================================
   KAMERA YAYINI — ekran bölme
   1 kişi tam ekran, 2 kişi ikiye, 3 kişi biri üstte ikisi altta,
   4 kişi dörde. Daha fazlası için ızgara kendi kendine sütunlanır.
   ========================================================================== */
.izgara {
    display: grid;
    gap: 6px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
}

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

/* Üç kişi: biri üstte tam genişlik, ikisi altta yan yana */
.izgara--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.izgara--3 > .izgara__kutu:first-child { grid-column: 1 / -1; }

.izgara--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.izgara__kutu {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: #0b0b0b;
    overflow: hidden;
}
.izgara__kutu video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.izgara__etiket {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 2px 9px;
    font-size: .7rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border-radius: 999px;
}

.izgara__bos {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .92rem;
}

.yayin__kamera-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
.yayin__durum { font-size: .84rem; color: var(--muted); }

@media (max-width: 640px) {
    /* Telefonda yan yana iki görüntü çok küçük kalıyor: alt alta */
    .izgara--2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .izgara { aspect-ratio: 3 / 4; }
    .izgara--1 { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   ÇEREZ ŞERİDİ — koyu zemin üzerinde yazı renkleri
   Şerit her zaman koyu; içindeki başlıklar ve düğmeler tema rengini
   (açık temada koyu) alınca okunmuyordu. Burada beyaza sabitlenir.
   ========================================================================== */
.cookie-bar,
.cookie-bar p,
.cookie-bar strong,
.cookie-bar span,
.cookie-bar label,
.cookie-bar em { color: #fff; }

.cookie-bar__detail { border-top-color: rgba(255, 255, 255, .22); }
.cookie-bar__link { color: #fff; }
.cookie-group p,
.cookie-group__fixed { color: rgba(255, 255, 255, .78); opacity: 1; }

/* Düğmeler koyu zemine göre */
.cookie-bar .btn--ghost {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
}
.cookie-bar .btn--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .45);
}
.cookie-group .switch input { accent-color: #fff; }

/* Tercih kulpu şeritten ayrı: sayfa zemini üzerinde durur */
.cookie-reopen { color: var(--ink-soft); background: var(--surface); }

/* ==========================================================================
   YAYIN TEPKİLERİ
   ========================================================================== */
.tepki-serit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.tepki {
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
    line-height: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: transform .12s var(--ease), background .12s var(--ease);
}
.tepki:hover { background: var(--bg-alt); transform: translateY(-2px); }
.tepki.is-basildi { transform: scale(1.28); }

/* Uçuşan emojiler oynatıcının üstünde */
.yayin__sahne { position: relative; }
.tepki-katman {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}
.tepki-ucan {
    position: absolute;
    bottom: 8%;
    font-size: 1.8rem;
    animation: tepki-ucus 3s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes tepki-ucus {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    12%  { opacity: 1; transform: translateY(-14px) scale(1); }
    100% { opacity: 0; transform: translateY(-260px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    /* Hareket azaltılmışsa emoji uçmaz, kısa süre görünüp kaybolur */
    .tepki-ucan { animation: tepki-soluk 1.4s ease forwards; }
    .tepki:hover, .tepki.is-basildi { transform: none; }
}
@keyframes tepki-soluk {
    0%, 60% { opacity: 1; }
    100%    { opacity: 0; }
}

@media (max-width: 640px) {
    .tepki { width: 40px; height: 40px; font-size: 1.2rem; }
}

/* ==========================================================================
   DUYURU KAPATMA — telefonda dokunma alanı
   Düğme küçük kaldığı ve yazının altında kalabildiği için telefonda
   kapatılamıyordu. Sağ üste sabitlenip dokunma alanı büyütüldü.
   ========================================================================== */
@media (max-width: 900px) {
    .announce__inner { position: relative; padding-inline-end: 44px; }
    .announce__close {
        position: absolute;
        top: 50%;
        inset-inline-end: 0;
        transform: translateY(-50%);
        z-index: 2;
        width: 40px;
        height: 40px;
        margin: 0;
        font-size: 1.5rem;
        opacity: 1;
        /* Dokunma tarayıcı jestleriyle çakışmasın */
        touch-action: manipulation;
    }
}

/* Gruplu hikayede kaç parça olduğu kapakta yazar */
.story__adet {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .62rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--ink);
    border: 2px solid var(--surface);
    border-radius: 999px;
}

/* ==========================================================================
   DEPREM HARİTASI
   Türkiye haritasının üzerine deprem noktaları bindirilir. Dış bir
   harita servisi kullanılmaz; ne ek istek gider ne de ziyaretçinin
   konumu başka bir yere açılır.
   ========================================================================== */
.deprem-harita { margin-bottom: 34px; }
.deprem-harita__cerceve { position: relative; }

/* Alttaki il haritası soluk dursun, noktalar öne çıksın */
.deprem-harita__cerceve .tr-map__svg { opacity: .5; filter: none; }
.deprem-harita__cerceve .tr-map__path { pointer-events: none; }

.deprem-harita__noktalar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.deprem-nokta { cursor: pointer; outline: none; }
.deprem-nokta__iz { transition: r .15s var(--ease), fill-opacity .15s var(--ease); }
.deprem-nokta:hover .deprem-nokta__iz,
.deprem-nokta:focus-visible .deprem-nokta__iz { fill-opacity: 1; }
.deprem-nokta:focus-visible .deprem-nokta__iz { stroke: var(--ink); stroke-width: 1.6; }

/* Büyük depremlerde yayılan halka */
.deprem-nokta__halka {
    transform-box: fill-box;
    transform-origin: center;
    animation: deprem-dalga 2.4s ease-out infinite;
}
@keyframes deprem-dalga {
    0%   { opacity: .8; transform: scale(1); }
    100% { opacity: 0;  transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
    .deprem-nokta__halka { animation: none; opacity: .45; }
}

.deprem-balon {
    position: absolute;
    z-index: 4;
    display: grid;
    gap: 2px;
    max-width: 240px;
    padding: 8px 11px;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 12px));
}
.deprem-balon { display: flex; align-items: center; gap: 10px; max-width: 280px; }
.deprem-balon__buyukluk {
    flex: none; width: 40px; height: 40px; display: grid; place-items: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1rem;
    color: #fff; background: var(--brand); border-radius: 10px;
}
.deprem-balon__govde { display: grid; gap: 1px; min-width: 0; }
.deprem-balon strong { font-size: .86rem; line-height: 1.25; }
.deprem-balon span { color: var(--ink-soft); font-size: .74rem; }
.deprem-balon small { color: var(--muted); font-size: .7rem; }
.deprem-balon span:empty, .deprem-balon small:empty { display: none; }

/* Deprem haritasında il adları: küçük, tıklanmaz, tek renk zemin */
.tr-map__etiket {
    font-family: var(--font-body, system-ui);
    font-size: 8px;
    font-weight: 600;
    fill: #1f2a44;   /* harita zemini her temada açık gri; yazı hep koyu */
    fill-opacity: .8;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 2px;
    stroke: none;
    pointer-events: none;
    letter-spacing: .02em;
}
.deprem-harita__cerceve .tr-map__svg { opacity: 1; }
@media (max-width: 640px) { .tr-map__etiket { font-size: 9px; } }

.deprem-olcek {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: .76rem;
    color: var(--muted);
}
.deprem-olcek li { display: flex; align-items: center; gap: 6px; }
.deprem-olcek span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6);
}

@media (max-width: 640px) {
    .deprem-olcek { gap: 10px; font-size: .7rem; }
    .deprem-balon { max-width: 180px; font-size: .74rem; }
}

/* ==========================================================================
   MENÜ AÇIKKEN KATMAN SIRASI
   Menü başlığın içinde durduğu için başlığın katmanına (100) bağlı;
   çerez şeridi (200) ve duyuru kartı (130) üstüne biniyordu.
   Menü açılınca başlık en üste çıkar, kart gizlenir.
   ========================================================================== */
body.nav-open .site-header { z-index: 260; }
body.nav-open .nav-overlay { z-index: 255; }
body.nav-open .announce-card,
body.nav-open .scroll-top,
body.nav-open .fab { visibility: hidden; }

/* ==========================================================================
   İÇERİK BLOKLARI — WordPress/Elementor'dan gelen düzenler
   Yan yana kolon, ekip kartı, sayaç, galeri, içerik görseli.
   Tümü .prose içinde çalışır; panelden düzenlenebilir.
   ========================================================================== */
.prose .ust-yazi {
    margin: 0 0 4px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand);
}
.prose .alt-yazi { margin: -6px 0 18px; color: var(--muted); }

.prose .icerik-gorsel { margin: 22px 0; }
.prose .icerik-gorsel img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow);
}

/* Görsel + metin yan yana; telefonda alt alta */
.prose .iki-kolon {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    margin: 28px 0;
}
.prose .iki-kolon > div > :first-child { margin-top: 0; }
.prose .iki-kolon > div > :last-child  { margin-bottom: 0; }
.prose .iki-kolon .icerik-gorsel { margin: 0; }

/* Ekip kartları */
.prose .ekip-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
    justify-content: center;
    gap: 22px;
    margin: 24px 0;
}
.prose .ekip-uye {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 22px 18px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.prose .ekip-uye img {
    width: 132px;
    height: 132px;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 2px var(--brand);
}
.prose .ekip-uye strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); }
.prose .ekip-uye span {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}
.prose .ekip-uye p { margin: 8px 0 0; font-size: .88rem; color: var(--ink-soft); }

/* Sayaçlar */
.prose .sayac-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 24px 0;
}
.prose .sayac-kutu {
    display: grid;
    gap: 2px;
    padding: 18px;
    text-align: center;
    background: var(--bg-alt);
    border-radius: 14px;
}
.prose .sayac-kutu strong { font-family: var(--font-head); font-size: 2rem; color: var(--brand); }
.prose .sayac-kutu span { font-size: .84rem; color: var(--muted); }

/* Galeri */
.prose .icerik-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin: 22px 0;
}
.prose .icerik-galeri a, .prose .icerik-galeri figure { margin: 0; display: block; }
.prose .icerik-galeri img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .2s var(--ease);
}
.prose .icerik-galeri a:hover img { transform: scale(1.03); }
.prose .icerik-galeri figcaption { margin-top: 6px; font-size: .8rem; color: var(--muted); }

@media (max-width: 720px) {
    .prose .ekip-uye img { width: 110px; height: 110px; }
    .prose .icerik-galeri { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .prose .icerik-galeri img { transition: none; }
}

/* =========================================================
   BİLDİRGE ŞABLONU — belge görünümü
   ========================================================= */
.section--bildirge { background: var(--bg-alt); }
.bildirge {
    --kagit: #fffdf7;
    --murekkep: #1f1a17;
    --altin: #b8923a;
    position: relative;
    margin: 0 auto;
    padding: 14px;
    background: var(--kagit);
    color: var(--murekkep);
    border-radius: 6px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .08);
    background-image:
        radial-gradient(circle at 20% 10%, rgba(184, 146, 58, .07), transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(184, 146, 58, .07), transparent 40%);
}
:root[data-theme="dark"] .bildirge,
:root:not([data-theme="light"]) .bildirge { --kagit: #fffdf7; --murekkep: #1f1a17; }
.bildirge__cerceve {
    padding: clamp(28px, 6vw, 64px) clamp(20px, 6vw, 72px);
    border: 2px solid var(--altin);
    outline: 1px solid rgba(184, 146, 58, .45);
    outline-offset: 4px;
    border-radius: 3px;
}

/* --------------------------------------------------------------
   BİLDİRGE — ARKA PLAN FİLİGRANI
   Belgenin ortasinda cok soluk, buyuk bir yazi durur. Metnin
   arkasinda kalir (z-index), tiklanmaz ve secilemez; yazdirmada
   da gorunur ki cikti belgesi de isaretli olsun.
   -------------------------------------------------------------- */
.bildirge__cerceve { position: relative; overflow: hidden; }
.bildirge__filigran {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    align-content: space-around;
    justify-items: center;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}
.bildirge__filigran img {
    /* Kutuya sigacak kadar buyuk; dar ekranda vw ile kuculur */
    width: clamp(160px, 46vw, 340px);
    height: auto;
    opacity: .08;
    transform: rotate(-24deg);
    transform-origin: center;
}
:root[data-theme="dark"] .bildirge__filigran img,
:root:not([data-theme="light"]) .bildirge__filigran img { opacity: .07; }

/* Govde ve baslik filigranin onunde kalsin */
.bildirge__bas,
.bildirge__govde,
.bildirge__son { position: relative; z-index: 1; }

@media print {
    .bildirge__filigran img { opacity: .1; }
}

.bildirge__bas { display: grid; justify-items: center; gap: 14px; margin-bottom: 30px; }
.bildirge__logo { width: 110px; height: auto; object-fit: contain; }
.bildirge__cizgi {
    width: 140px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--altin), transparent);
}
.bildirge__govde { color: var(--murekkep); font-size: 1.06rem; line-height: 1.85; }
.bildirge__govde h2 {
    margin: 0 0 22px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: center;
    color: var(--murekkep);
}
.bildirge__govde h2 + h2 { margin-top: -10px; font-size: 1.15rem; font-weight: 600; color: var(--altin); text-transform: uppercase; letter-spacing: .12em; }
.bildirge__govde h3 { margin: 26px 0 10px; font-family: 'Georgia', serif; font-size: 1.2rem; color: var(--murekkep); }
.bildirge__govde p { margin: 0 0 16px; text-align: justify; hyphens: auto; }
.bildirge__govde ol, .bildirge__govde ul { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: madde; }
.bildirge__govde li {
    position: relative; margin: 0 0 12px; padding-left: 46px; text-align: justify;
    counter-increment: madde;
}
.bildirge__govde li { padding-left: 34px; }
.bildirge__govde li::before {
    /* Madde işareti: küçük altın elmas; numara yok */
    content: '';
    position: absolute; left: 6px; top: .62em;
    width: 9px; height: 9px;
    background: var(--altin);
    transform: rotate(45deg);
    border-radius: 1px;
}
.bildirge__govde p:last-of-type {
    margin: 26px 0 0;
    font-family: 'Georgia', serif; font-style: italic; font-size: 1.25rem;
    text-align: center;
}
.bildirge__son { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 40px; }
.bildirge__imza { display: grid; gap: 4px; text-align: center; min-width: 180px; }
.bildirge__imza-cizgi { display: block; height: 1px; background: var(--murekkep); opacity: .5; margin-bottom: 6px; }
.bildirge__imza strong { font-family: 'Georgia', serif; font-size: 1.05rem; }
.bildirge__imza small { font-size: .8rem; color: var(--altin); letter-spacing: .1em; }
.bildirge__muhur {
    width: 96px; height: 96px; display: grid; place-items: center;
    border: 2px double var(--altin); border-radius: 50%;
    transform: rotate(-8deg); opacity: .85;
}
.bildirge__muhur img { width: 64px; height: 64px; object-fit: contain; filter: grayscale(1) opacity(.7); }
@media (max-width: 640px) {
    .bildirge { padding: 8px; }
    .bildirge__cerceve { outline-offset: 3px; }
    .bildirge__govde { font-size: .98rem; line-height: 1.75; }
    .bildirge__govde p, .bildirge__govde li { text-align: left; }
    .bildirge__govde li { padding-left: 30px; }
    .bildirge__son { flex-direction: column-reverse; align-items: center; }
}
@media print { .bildirge { box-shadow: none; } }

/* =========================================================
   SATIR / SÜTUN KURUCUSU — ön yüz
   ========================================================= */
.kurucu {
    display: grid;
    grid-template-columns: var(--kurucu-kolon, 1fr);
    gap: var(--kurucu-gap, 28px);
    align-items: start;
}
.kurucu--esit { align-items: stretch; }
.kurucu__kolon { display: flex; flex-direction: column; gap: 18px; min-width: 0; border-radius: 14px; }
.kurucu-tam { padding: 0 16px; }
.ko { min-width: 0; }
.ko--center { text-align: center; }
.ko--right { text-align: right; }
.ko--left { text-align: left; }

.ko__ust { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.ko__baslik { margin: 0; font-family: var(--font-head); line-height: 1.2; }
h1.ko__baslik { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2.ko__baslik { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3.ko__baslik { font-size: 1.3rem; }
h4.ko__baslik { font-size: 1.1rem; }
.ko__metin--small { font-size: .9rem; }
.ko__metin--lead { font-size: 1.15rem; line-height: 1.7; color: var(--ink-soft); }
.ko__metin > :first-child { margin-top: 0; }
.ko__metin > :last-child { margin-bottom: 0; }

.ko__gorsel { margin: 0; display: block; }
.ko__gorsel img { width: 100%; height: auto; display: block; }
.ko__gorsel--md img { border-radius: 14px; }
.ko__gorsel--full img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.ko__gorsel figcaption { margin-top: 8px; font-size: .82rem; color: var(--muted); text-align: center; }

.ko__galeri { display: grid; grid-template-columns: repeat(var(--ko-sutun, 3), 1fr); gap: 10px; }
.ko__galeri a { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.ko__galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .25s var(--ease); }
.ko__galeri a:hover img { transform: scale(1.04); }
.ko__galeri span { position: absolute; inset: auto 0 0; padding: 20px 10px 8px; font-size: .78rem; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }

.ko--button .btn { display: inline-flex; align-items: center; gap: 8px; }
.btn--sm { padding: 8px 16px; font-size: .84rem; }
.btn--lg { padding: 15px 30px; font-size: 1.05rem; }

.ko__ayrac { margin: 4px auto; border: 0; border-top: 1px solid var(--line); }
.ko__ayrac--dashed { border-top-style: dashed; }
.ko__ayrac--dots { border-top-style: dotted; border-top-width: 3px; }
.ko__ayrac--brand { width: 64px !important; margin-left: 0; border-top: 3px solid var(--brand); border-radius: 3px; }
.ko--center .ko__ayrac--brand { margin-left: auto; }
.ko--spacer { height: var(--h, 32px); }

/* Ekip kartı: webde büyük, mobilde küçük */
.ko .ekip-uye { display: grid; justify-items: center; gap: 4px; padding: 26px 20px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.ko .ekip-uye img { width: 168px; height: 168px; margin-bottom: 10px; object-fit: cover; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--brand); }
.ko .ekip-uye--sm img { width: 120px; height: 120px; }
.ko .ekip-uye--lg img { width: 220px; height: 220px; }
.ko .ekip-uye strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--ink); }
.ko .ekip-uye > span { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.ko .ekip-uye p { margin: 8px 0 0; font-size: .88rem; color: var(--ink-soft); }
.ekip-uye__baglanti { display: flex; gap: 8px; margin-top: 10px; }
.ekip-uye__baglanti a { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: .75rem; }
.ekip-uye__baglanti a:hover { border-color: var(--brand); color: var(--brand); }
.ekip-uye__baglanti svg { width: 16px; height: 16px; }
/* Prose içindeki (WordPress'ten gelen) ekip kartları da webde büyük */
@media (min-width: 900px) { .prose .ekip-uye img { width: 168px; height: 168px; } .prose .ekip-izgara { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); } }

.ko .sayac-kutu { display: grid; gap: 2px; padding: 22px 18px; text-align: center; background: var(--bg-alt); border-radius: 14px; }
.ko .sayac-kutu strong { font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; color: var(--brand); }
.ko .sayac-kutu > span { font-size: .84rem; color: var(--muted); }
.sayac-kutu__simge { display: grid; place-items: center; margin: 0 auto 8px; width: 44px; height: 44px; color: var(--brand); }
.sayac-kutu__simge svg { width: 28px; height: 28px; }

.ko__kutu { display: block; color: inherit; text-decoration: none; }
.ko__kutu--cerceve { padding: 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
a.ko__kutu--cerceve:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .35); }
.ko__simge { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; border-radius: 14px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.ko__simge svg { width: 26px; height: 26px; }
.ko__kutu h3 { margin: 0 0 6px; font-size: 1.1rem; }
.ko__kutu p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.ko__kart { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.ko__kart > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ko__kart-govde { padding: 18px; display: grid; gap: 8px; justify-items: start; }
.ko__kart-govde h3 { margin: 0; font-size: 1.1rem; }
.ko__kart-govde p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

.ko__alinti { margin: 0; padding: 22px 24px; border-left: 4px solid var(--brand); background: var(--bg-alt); border-radius: 0 14px 14px 0; }
.ko__alinti p { margin: 0 0 14px; font-size: 1.08rem; font-style: italic; line-height: 1.65; }
.ko__alinti footer { display: flex; align-items: center; gap: 12px; }
.ko__alinti img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.ko__alinti footer span { display: grid; }
.ko__alinti small { color: var(--muted); }

.ko__uyari { padding: 16px 18px; border-radius: 12px; border: 1px solid; }
.ko__uyari strong { display: block; margin-bottom: 4px; }
.ko__uyari p { margin: 0; font-size: .92rem; }
.ko__uyari--info { background: #eaf3ff; border-color: #b9d6ff; color: #1b3f74; }
.ko__uyari--success { background: #e9f8ee; border-color: #b8e6c6; color: #1d5a32; }
.ko__uyari--warn { background: #fff6e5; border-color: #ffd89b; color: #7a4a00; }
.ko__uyari--danger { background: #ffecec; border-color: #ffb8b8; color: #8a1414; }

.ko__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ko__liste li { display: flex; align-items: flex-start; gap: 10px; }
.ko__liste svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }

.ko__akordeon { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ko__akordeon + .ko__akordeon { margin-top: 8px; }
.ko__akordeon summary { padding: 14px 18px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ko__akordeon summary::after { content: '+'; font-size: 1.3rem; color: var(--brand); transition: transform .2s; }
.ko__akordeon[open] summary::after { transform: rotate(45deg); }
.ko__akordeon > div { padding: 0 18px 16px; }

.ko__sekmeler [role="tablist"] { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 16px; }
.ko__sekmeler [role="tab"] { padding: 10px 16px; margin-bottom: -2px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.ko__sekmeler [role="tab"][aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }

.ko__ilerleme-bas { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .9rem; }
.ko__ilerleme-ray { height: 10px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.ko__ilerleme-ray i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }

.ko__tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ko__tablo th, .ko__tablo td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.ko__tablo th { background: var(--bg-alt); font-weight: 600; }
.ko__tablo--cizgili tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-alt) 55%, transparent); }

.ko__adimlar { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 22px; }
.ko__adimlar::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.ko__adimlar li { position: relative; }
.ko__adimlar li::before { content: ''; position: absolute; left: -26px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--surface); }
.ko__adimlar time { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.ko__adimlar strong { display: block; font-size: 1.02rem; }
.ko__adimlar p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-soft); }

.ko__video { position: relative; width: 100%; overflow: hidden; border-radius: 14px; background: #000; }
.ko__video iframe, .ko__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ko__harita { width: 100%; border: 0; border-radius: 14px; }

.ko__dosya { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.ko__dosya:hover { border-color: var(--brand); }
.ko__dosya svg { flex: none; width: 28px; height: 28px; color: var(--brand); }
.ko__dosya span { display: grid; }
.ko__dosya small { color: var(--muted); }

.ko__sosyal { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ko__sosyal a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); font-size: .75rem; font-weight: 700; }
.ko__sosyal a:hover { border-color: var(--brand); color: var(--brand); }
.ko__sosyal svg { width: 18px; height: 18px; }

.ko__logolar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; }
.ko__logolar img { height: 48px; width: auto; max-width: 160px; object-fit: contain; }
.ko__logolar--sm img { height: 32px; }
.ko__logolar--lg img { height: 72px; max-width: 220px; }
.ko__logolar--gri img { filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.ko__logolar--gri a:hover img, .ko__logolar--gri span:hover img { filter: none; opacity: 1; }

@media (max-width: 760px) {
    .kurucu:not(.kurucu--m-keep):not(.kurucu--m-scroll) { grid-template-columns: 1fr; gap: 22px; }
    .kurucu--m-reverse { display: flex; flex-direction: column-reverse; }
    .kurucu--m-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .kurucu--m-scroll > .kurucu__kolon { flex: 0 0 82%; scroll-snap-align: start; }
    .kurucu--m-keep { gap: 12px; }
    .ko--spacer { height: var(--hm, 16px); }
    .ko .ekip-uye img { width: 110px; height: 110px; }
    .ko .ekip-uye--lg img { width: 132px; height: 132px; }
    .ko .ekip-uye { padding: 18px 14px; }
    .ko__galeri { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ko__gorsel { width: 100% !important; }
    .ko .sayac-kutu strong { font-size: 1.8rem; }
    .kurucu-tam { padding: 0 12px; }
}

/* Instagram boyutlu galeri: kare, ortalı, 640px'e kadar */
.gallery--insta { max-width: 640px; margin-inline: auto; }
.gallery--insta .gallery__item img { aspect-ratio: 1 / 1; }
.gallery--insta .gallery__thumbs { justify-content: center; }
.article .gallery--insta { margin-bottom: 26px; }

/* Sığdırılmış slaytta noktalar görselin üstünü kapatmasın */
@media (max-width: 760px) {
    .hero__dots { bottom: 10px; }
    .hero__arrow { opacity: .85; }
}

/* Okuma ilerleme çizgisi: başlığın alt kenarında, kaydırdıkça uzar */
.okuma-cizgisi {
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%;
    height: 3px;
    transform: scaleX(var(--okuma, 0));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--brand), #ff7a45);
    box-shadow: 0 0 10px rgba(255, 6, 6, .55);
    pointer-events: none;
    z-index: 1;
    transition: transform .12s linear;
}
@media (prefers-reduced-motion: reduce) { .okuma-cizgisi { transition: none; } }

/* Kurumsal sayfa blokları (Hakkımızda) */
.prose .bilgi-kart {
    padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
    border-top: 4px solid var(--brand);
}
.prose .bilgi-kart h3 { margin: 6px 0 8px; font-size: 1.25rem; }
.prose .bilgi-kart p { margin: 0; color: var(--ink-soft); }
.prose .bilgi-kart__simge { font-size: 1.8rem; line-height: 1; }
.prose .deger-liste {
    list-style: none; margin: 18px 0 28px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
}
.prose .deger-liste li {
    display: grid; gap: 4px; padding: 16px 18px; margin: 0;
    border-radius: 12px; background: var(--bg-alt); border-left: 4px solid var(--brand);
}
.prose .deger-liste strong { font-family: var(--font-head); font-size: 1rem; }
.prose .deger-liste span { font-size: .88rem; color: var(--ink-soft); }
.prose .sayac-kutu strong { font-size: 1.6rem; }
.prose .zaman-cizgisi { list-style: none; margin: 18px 0 30px; padding: 0 0 0 30px; position: relative; display: grid; gap: 20px; }
.prose .zaman-cizgisi::before { content: ''; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.prose .zaman-cizgisi li { position: relative; margin: 0; padding: 0; }
.prose .zaman-cizgisi li::before { content: ''; position: absolute; left: -27px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--surface); }
.prose .zaman-cizgisi time { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.prose .zaman-cizgisi strong { display: block; font-size: 1.05rem; }
.prose .zaman-cizgisi p { margin: 4px 0 0; font-size: .92rem; color: var(--ink-soft); }
.prose .ekip-uye--katil { border-style: dashed; background: transparent; }
.prose .ekip-uye__arti {
    width: 132px; height: 132px; margin-bottom: 8px; display: grid; place-items: center;
    border-radius: 50%; border: 2px dashed var(--brand); color: var(--brand); font-size: 3rem; font-weight: 300;
}
.prose .ekip-uye--katil a { font-weight: 600; }
@media (min-width: 900px) { .prose .ekip-uye__arti { width: 168px; height: 168px; } }
@media (max-width: 720px) { .prose .ekip-uye__arti { width: 110px; height: 110px; font-size: 2.4rem; } }

/* --------------------------------------------------------------
   ÇALIŞMA ALANLARIMIZ — TEK SATIR
   Alanlar alt alta sarkmasin ve yana da tasmasin: sutunlar
   daralarak sayfaya sigar. Kart icerigi kucuk yazi ve dar
   dolguyla verilir; boylece alti alan tek satirda durur.
   -------------------------------------------------------------- */
.prose .deger-liste {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 28px;
}
.prose .deger-liste li {
    padding: 12px 12px 13px;
    border-left-width: 3px;
    gap: 3px;
}
.prose .deger-liste strong { font-size: .84rem; line-height: 1.25; }
.prose .deger-liste span { font-size: .74rem; line-height: 1.4; }

/* Geniş ekranda biraz nefes alsın */
@media (min-width: 1280px) {
    .prose .deger-liste { gap: 10px; }
    .prose .deger-liste li { padding: 14px 14px 15px; }
    .prose .deger-liste strong { font-size: .9rem; }
    .prose .deger-liste span { font-size: .78rem; }
}

/* Dar ekranda tek satır zorlanmaz: önce üçe, sonra ikiye iner */
@media (max-width: 900px) {
    .prose .deger-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .prose .deger-liste strong { font-size: .92rem; }
    .prose .deger-liste span { font-size: .8rem; }
}
@media (max-width: 560px) {
    .prose .deger-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kamera yayını: görüntü gelene kadar kapak görseli */
.izgara[style*="--kapak"] { background-image: var(--kapak); background-size: cover; background-position: center; }
.izgara__bos--kapakli {
    position: absolute; inset: auto 12px 12px; margin: 0;
    padding: 10px 14px; border-radius: 10px;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: .9rem; text-align: center;
    backdrop-filter: blur(4px);
}
.izgara { position: relative; }

/* Üst şerit: duyuru kutusu çerçeveli ve tek başına kapatılabilir */
.topbar { position: relative; }
.topbar__duyuru { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.topbar__duyuru--kapatilir {
    padding: 3px 4px 3px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}
.topbar__kapat {
    flex: none;
    width: 20px; height: 20px; display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12); color: inherit; opacity: .75; cursor: pointer;
}
.topbar__kapat:hover { opacity: 1; background: var(--brand); color: #fff; }
@media (max-width: 760px) { .topbar__duyuru--kapatilir { padding-inline-start: 8px; } }

/* Bağış rozetleri: koyu temada şeffaf PNG'nin siyah çizgileri kayboluyordu;
   rozetin arkasına açık bir zemin konur. */
:root[data-theme="dark"] .donation-type__badge,
:root[data-theme="dark"] .donate-cta__badge,
:root[data-theme="dark"] .donation-card__badge,
:root:not([data-theme="light"]) .donation-type__badge,
:root:not([data-theme="light"]) .donate-cta__badge,
:root:not([data-theme="light"]) .donation-card__badge {
    background: rgba(255, 255, 255, .94);
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .donation-type__badge,
    :root:not([data-theme="dark"]) .donate-cta__badge,
    :root:not([data-theme="dark"]) .donation-card__badge { background: none; padding: 0; box-shadow: none; }
}

/* İçerik iki kolonu: dar sütunlu şablonlarda da yan yana kalsın
   (kurumsal sayfada içerik alanı ~700px; eski 720px eşiği alt alta diziyordu) */
@media (min-width: 560px) {
    .prose .iki-kolon { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
@media (max-width: 559px) { .prose .iki-kolon { grid-template-columns: 1fr; } }

/* Belge galerisi: sayfa taramaları kırpılmadan, tam görünür */
.prose .icerik-galeri--belge { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.prose .icerik-galeri--belge img {
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
}


/* ============================================================
   TELEFON — AÇILIR PENCERELER
   ============================================================ */

/* Yardımcı penceresi telefonda ekranı kaplamasın */
@media (max-width: 760px) {
    .fab__panel {
        position: fixed;
        inset-inline: 10px;
        bottom: 62px;
        width: auto;
        max-width: none;
        max-height: 62vh;
        overflow-y: auto;
        border-radius: 16px;
    }
    .fab__panel .assistant__body { max-height: 40vh; }
    .fab__panel h2, .fab__panel h3 { font-size: 1rem; }
    .fab__panel p, .fab__panel li, .fab__panel button { font-size: .88rem; }
}

/* ============================================================
   KISAYOL RAYI — SON DÜZEN
   ------------------------------------------------------------
   Masaüstü: eski hâli. Ray hep açık ve dar (yalnızca simgeler),
   üzerine gelince etiket solda açılır, kulp yok.

   Telefon: kulptan açılıp kapanır. Açıkken simge + yazı yan yana,
   kapalıyken panel sağa kayar, geriye ince kulp kalır.
   ============================================================ */

/* ---------------------------------------------- Masaüstü */
@media (hover: hover) and (min-width: 901px) {
    /* Kulp gösterilmez; ray daima açık durur */
    .social-rail--kisayol .social-rail__handle { display: none !important; }

    .social-rail--kisayol .social-rail__panel,
    .social-rail--kisayol:not(.is-open) .social-rail__panel {
        width: 52px !important;
        max-width: none;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible;
    }
    .social-rail--kisayol:not(.is-open) { pointer-events: auto; }
}

/* ---------------------------------------------- Telefon / tablet */
@media (hover: none), (max-width: 900px) {
    /* Kulp: rayı açıp kapatır */
    .social-rail--kisayol .social-rail__handle {
        display: grid !important;
        place-items: center;
        width: 20px;
        height: 46px;
        flex: none;
        color: #fff;
        background: var(--brand);
        border: 0;
        border-start-start-radius: 12px;
        border-end-start-radius: 12px;
        cursor: pointer;
        box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
    }
    /* Ok yönü: kapalıyken sola (aç), açıkken sağa (kapat) */
    .social-rail--kisayol .social-rail__handle svg { transform: rotate(180deg); transition: transform .25s var(--ease); }
    .social-rail--kisayol.is-open .social-rail__handle svg { transform: none; }

    .social-rail--kisayol .social-rail__panel {
        width: auto !important;
        max-width: 172px;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid var(--line);
        border-inline-end: 0;
        border-start-start-radius: 14px;
        border-end-start-radius: 14px;
        box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .45);
        transition: transform .26s var(--ease), opacity .2s var(--ease);
    }
    .social-rail--kisayol:not(.is-open) .social-rail__panel {
        /*
         * Kapalıyken panel akıştan çıkar: yoksa yer kaplamaya devam
         * ediyor ve kulp ekranın ortasında kalıyordu. Artık kulp
         * sağ kenara yaslanır.
         */
        position: absolute;
        inset-inline-end: 0;
        top: 0;
        transform: translateX(105%);
        opacity: 0;
        pointer-events: none;
    }
    .social-rail--kisayol.is-open .social-rail__panel {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
    /* Kapalı ray sayfanın üstünü kapatmasın */
    .social-rail--kisayol:not(.is-open) { pointer-events: none; }
    .social-rail--kisayol:not(.is-open) .social-rail__handle { pointer-events: auto; }

    /* Satırlar: simge solda, yazı sağda, ölçüler orantılı */
    .social-rail--kisayol .social-rail__link,
    .social-rail--kisayol .social-rail__theme {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: auto;
        min-height: 38px;
        padding: 7px 12px;
        color: var(--ink);
        background: none;
        border: 0;
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: start;
        cursor: pointer;
    }
    .social-rail--kisayol .social-rail__link + .social-rail__link,
    .social-rail--kisayol .social-rail__theme + .social-rail__link,
    .social-rail--kisayol .social-rail__link + .social-rail__theme {
        border-top: 1px solid var(--line);
    }
    .social-rail--kisayol .social-rail__link svg,
    .social-rail--kisayol .social-rail__theme svg {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--brand);
    }
    /* Etiket artık açılır balon değil, satırın kendi yazısı */
    .social-rail--kisayol .social-rail__label {
        position: static;
        max-width: none;
        height: auto;
        padding: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: inherit;
        background: none;
        border-radius: 0;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .social-rail { bottom: 108px; top: auto; transform: none; position: fixed; }
    .social-rail--kisayol { position: fixed; }
}

/* ==============================================================
   CANLI YAYIN ROZETİ — LOGONUN YANINDA
   Görünüşü hikaye şeridindeki öğeyle aynı: yuvarlak kapak,
   çevresinde nabız gibi atan kırmızı halka, altında "CANLI"
   etiketi. Yalnızca yeri farklı — şerit yerine logonun yanında,
   web/mobil/uygulamada aynı noktada.
   ============================================================== */
.canli-rozet {
    position: relative;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    margin-inline-start: 12px;
    /* Etiket halkanın altından taşar; başlığı büyütmesin diye
       taşan kısım için burada yer ayrılır */
    padding-block: 8px;
    text-decoration: none;
    line-height: 1;
}

.canli-rozet__halka {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--brand, #ff0606);
    animation: canli-nabiz 2.4s ease-in-out infinite;
}
.canli-rozet__halka img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portre kapaklarda yüz üstte kalsın */
    object-position: center top;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--bg-alt);
}

.canli-rozet__etiket {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.6;
    color: #fff;
    background: var(--brand, #ff0606);
    border: 1.5px solid var(--surface);
    border-radius: 999px;
    white-space: nowrap;
}

/* Koyu başlıkta çerçeveler zemine uysun */
.site-header--koyu .canli-rozet__halka img,
.site-header--koyu .canli-rozet__etiket { border-color: rgba(255, 255, 255, .85); }

/* Dar ekranda logo ve düğmelerle sıkışmasın */
@media (max-width: 600px) {
    .canli-rozet { margin-inline-start: 8px; }
    .canli-rozet__halka { width: 36px; height: 36px; padding: 2px; }
    .canli-rozet__etiket { font-size: .44rem; padding: 1px 5px; }
}

/*
 * Hareketi kısıtlı cihazlarda nabız atmasın; rozet yine görünür.
 * (Kullanıcının telefonunda "Hareketi Azalt" açık olabiliyor.)
 */
@media (prefers-reduced-motion: reduce) {
    .canli-rozet__halka { animation: none; }
}

/* ==============================================================
   HİKAYE ŞERİDİ BÖLÜM OLARAK KONULDUĞUNDA
   Şerit başlığın altındayken kendi beyaz bandı ve alt çizgisi
   olur; sayfanın ortasına bölüm olarak konduğunda bu bant
   yabancı duruyor ve bölüm dolgusuyla birlikte kocaman bir
   boşluk açıyordu. Bölüm içinde zemin ve çizgi kalkar, üstteki
   şeride yapışacak kadar dar bir dolgu kalır.
   ============================================================== */
.section--hikayeler {
    padding-block: 0;
    background: none;
}
.section--hikayeler .story-bar {
    background: none;
    border-bottom: 0;
}
.section--hikayeler .story-bar__inner { padding-block: 14px; }

/*
 * Masaustunde serit slider oklariyla ayni dikeye otursun.
 * Slider oklari sayfa govdesinden daha genis bir seritte duruyor;
 * serit de ayni genisligi alir. Halka 72px'lik ogenin ortasinda
 * durdugu icin kalan 5px de geri alinir — boylece ilk hikayenin
 * sol kenari okun sol kenariyla ayni yerden baslar.
 */
@media (min-width: 901px) {
    .section--hikayeler .story-bar__inner {
        width: min(100% - 2 * clamp(16px, 3vw, 34px), 1560px);
    }
    .section--hikayeler .story-bar__list { margin-inline-start: -5px; }
}

/* Bölümün kendi başlığı yazıldıysa şeritle arası kapansın */
.section--hikayeler .section__title { margin: 18px 0 2px; }

/* ==============================================================
   HİKAYE ŞERİDİ — HİKAYE + ÖNE ÇIKARILANLAR
   En solda "Hikaye" halkası marka renginde yanar; sağındaki
   "Öne Çıkarılanlar" kapakları sade gri çerçeveyle durur ki
   hangisinin güncel olduğu bir bakışta anlaşılsın.
   ============================================================== */
.story--one-cikan .story__ring { background: var(--line); }
.story--one-cikan .story__ad { color: var(--ink-soft); }

/* Hikaye ile öne çıkarılanlar arasında ince bir ayraç */
.story--hikaye + .story--one-cikan { position: relative; margin-inline-start: 10px; }
.story--hikaye + .story--one-cikan::before {
    content: '';
    position: absolute;
    inset-inline-start: -6px;
    top: 12px;
    bottom: 22px;
    width: 1px;
    background: var(--line);
}


/* --------------------------------------------------------------
   SLAYT LOGOSU — İKİ TEMA
   Slayta açık ve koyu tema için ayrı logo konabilir; ikisi de
   basılır, görüneni yukarıdaki tema kuralları seçer.
   -------------------------------------------------------------- */
.hero__logo-kutu { display: block; }
:root[data-theme="light"] .hero__logo-kutu--iki-tema .brand__logo--koyu { display: none; }

/* ==============================================================
   BAĞIŞ SAYFASI
   Girişte IBAN kartları, altında bağış türleri. Türler solda
   liste, sağda seçilenin kartı: kullanıcı tek ekranda hem
   seçeneği görüyor hem de nereye gideceğini biliyor.
   ============================================================== */
.section--tight { padding-block: clamp(26px, 4vw, 44px); }

.bagis-bolum__bas { margin-bottom: 22px; max-width: 62ch; }
.bagis-bolum__bas h2 {
    margin: 0 0 6px;
    font-family: var(--font-head);
    font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}
.bagis-bolum__bas p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------------ IBAN listesi
   Her hesap TEK SATIR: para birimi rozeti + IBAN + kopyala.
   Hesaplar amaca göre gruplanır; hesap adı ve banka bir kez,
   bloğun altında yazılır — altı kez tekrar etmesi okumayı
   zorlaştırıyordu.
   ------------------------------------------------------------------ */
.iban-blok {
    padding: 6px 20px 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
}

.iban-grup { padding-block: 12px; }
.iban-grup + .iban-grup { border-top: 1px solid var(--line); }
.iban-grup__ad {
    margin: 0 0 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
}

.iban-satirlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.iban-satir {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    text-align: start;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.iban-satir:hover {
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
}
.iban-satir.is-copied { border-color: #16a34a; background: rgba(22, 163, 74, .07); }

.iban-satir__para {
    justify-self: start;
    padding: 3px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--brand);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
}
.iban-satir__no {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.iban-satir__no::-webkit-scrollbar { display: none; }

.iban-satir__kopya {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: .74rem;
    color: var(--ink-soft);
}
.iban-satir:hover .iban-satir__kopya { color: var(--brand); }
.iban-satir.is-copied .iban-satir__kopya { color: #15803d; }

/* Hesap adı bloğun en üstünde; IBAN gibi tıklanınca kopyalanır */
.iban-sahip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-alt);
    color: var(--ink);
    text-align: start;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.iban-sahip:hover { border-color: var(--brand); }
.iban-sahip.is-copied { border-color: #16a34a; background: rgba(22, 163, 74, .07); }
.iban-sahip__etiket {
    grid-column: 1;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.iban-sahip__ad { grid-column: 1; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.iban-sahip__banka { grid-column: 1; font-size: .78rem; color: var(--ink-soft); }
.iban-sahip .iban-satir__kopya { grid-column: 2; grid-row: 1 / -1; }

/* ------------------------------------------------ Bağış türü seçici */
.bagis-secici {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, .8fr);
    gap: 24px;
    align-items: start;
}
.bagis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.bagis-satir {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.bagis-satir:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.bagis-satir.is-secili {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
    box-shadow: inset 3px 0 0 var(--brand);
}

/* Simge yerine sıra numarası: türler arasında ayrım yapar,
   hepsinde aynı rozetin tekrarlanmasına gerek kalmaz */
.bagis-satir__no {
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--line);
    letter-spacing: .02em;
    transition: color .2s ease;
}
.bagis-satir:hover .bagis-satir__no { color: var(--ink-soft); }
.bagis-satir.is-secili .bagis-satir__no { color: var(--brand); }

.bagis-satir__govde { display: grid; gap: 3px; min-width: 0; }
.bagis-satir__govde strong { font-size: 1rem; }
.bagis-satir__govde span {
    font-size: .85rem; color: var(--ink-soft); line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bagis-satir__isaret { color: var(--line); transition: transform .2s ease, color .2s ease; }
.bagis-satir:hover .bagis-satir__isaret,
.bagis-satir.is-secili .bagis-satir__isaret { color: var(--brand); transform: translateX(3px); }

/* Sağdaki özet kartı sayfayla birlikte kaymasın, yapışsın */
.bagis-ozet { position: sticky; top: calc(var(--header-h, 80px) + 16px); }
.bagis-ozet__kutu {
    display: grid;
    gap: 12px;
    padding: 26px 24px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .09);
}
.bagis-ozet__ust {
    margin: 0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.bagis-ozet__kutu h3 { margin: 0; font-family: var(--font-head); font-size: 1.35rem; line-height: 1.25; }
.bagis-ozet__metin { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }
.bagis-ozet__metin:empty { display: none; }
.bagis-ozet__ilerleme { display: grid; gap: 6px; }
.bagis-ozet__ilerleme small { font-size: .76rem; color: var(--ink-soft); }
.bagis-ozet__yer { margin: 0; font-size: .74rem; color: var(--ink-soft); }
.bagis-ozet__yer code { font-size: .74rem; }
.bagis-ozet__not {
    margin: 4px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: .76rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .bagis-secici { grid-template-columns: 1fr; }
    /*
     * Dar ekranda özet kartı listeden ÖNCE gelsin: seçilen tür
     * ve düğme, parmakla aşağı inmeden görünsün.
     */
    .bagis-ozet { position: static; order: -1; }
}
@media (max-width: 560px) {
    .iban-blok { padding-inline: 14px; }
    .iban-satir { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 9px 10px; }
    .iban-satir__no { font-size: .8rem; }
    /* Dar ekranda "kopyala" yazisi yer kaplamasin; satira dokunmak yeter */
    .iban-satir__kopya { display: none; }

    .bagis-satir { grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 12px; padding: 13px 14px; }
}

/* ==============================================================
   MAĞAZADAN TESLİM ALMA
   Ürün sayfasında ve sepette çıkar: müşteri sepete atmadan önce
   kargo ödemeden de alabileceğini görsün.
   ============================================================== */
.magaza-teslim {
    margin: 18px 0 0;
    padding: 15px 17px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line));
    background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.magaza-teslim__bas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--brand);
}
.magaza-teslim__bas svg { flex: 0 0 auto; }
.magaza-teslim__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.magaza-teslim__nokta { display: grid; gap: 2px; font-size: .84rem; line-height: 1.5; }
.magaza-teslim__nokta strong { font-size: .88rem; }
.magaza-teslim__nokta span { color: var(--ink-soft); }
.magaza-teslim__saat { font-size: .78rem; }
.magaza-teslim__nokta a { font-size: .8rem; font-weight: 600; justify-self: start; }
.magaza-teslim__not {
    margin: 11px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: .78rem;
    color: var(--ink-soft);
}

/* Sepet özetinde daha sıkı dursun */
.cart-summary .magaza-teslim { margin-top: 14px; padding: 13px 14px; }

/* Ödeme sayfasında teslimat başlıkları */
.checkout__altbaslik {
    margin: 16px 0 8px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.checkout__altbaslik:first-child { margin-top: 0; }
.checkout__altnot { margin: -4px 0 10px; font-size: .82rem; color: var(--ink-soft); }
.option--magaza .option__body span { display: block; font-size: .8rem; }

/* ==============================================================
   UYGULAMADA ALT PENCERE AÇIKKEN BAŞLIK SİMGELERİ
   Yardımcı ya da afet bildir penceresi alttan açıldığında
   başlıktaki sepet ve hesabım simgeleri çekilir: küçük ekranda
   pencere zaten her yeri kaplıyor, üstte duran simgeler hem yer
   kaplıyor hem yanlışlıkla tıklanıyordu.
   Menü ve bağış düğmesi yerinde kalır.
   ============================================================== */
.has-app-nav.alt-pencere-acik .header-tools .icon-btn {
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    pointer-events: none;
    /* Yer kaplamasın ki kalan düğmeler ortalansın */
    width: 0;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    overflow: hidden;
    transition: opacity .18s ease, transform .18s ease, width .18s ease;
}

/* Dar ekranda uygulama dışında da aynı davranış istenirse bu satır yeter */
.has-app-nav .header-tools .icon-btn {
    transition: opacity .18s ease, transform .18s ease, width .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .has-app-nav .header-tools .icon-btn { transition: none; }
}


/*
 * Çerez tercihleri bağlantısı alt bilgideki sözleşme satırında.
 * Köşedeki yüzer simge kaldırıldı: karar verildikten sonra ekranda
 * durmasına gerek yok ve mobilde yardımcı düğmesiyle çakışıyordu.
 */
.footer-legal__cerez {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.footer-legal__cerez:hover { color: var(--brand); }

/*
 * Şerit yana kayarken devamı olduğu belli olsun: sağ kenarda
 * hafif bir soluklaşma. Öne çıkarılanlar çoğaldıkça kullanıcı
 * parmakla (masaüstünde kaydırma çubuğuyla) sola kaydırır.
 */
.story-bar__list {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}

/* ==============================================================
   SİMGE GÖNDERENLER
   Yorumların altında ayrı bir liste: kim hangi simgeyi göndermiş.
   Tepkiler eskiden isimsizdi; yayıncı "kim alkışladı" göremiyordu.
   ============================================================== */
.tepki-gonderenler { margin-top: 20px; }
.tepki-gonderenler .yayin__yorum-baslik { margin-bottom: 8px; }

.tepki-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
    max-height: 190px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.tepki-satir {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border-radius: 9px;
    background: var(--bg-alt);
    font-size: .85rem;
}
.tepki-satir__simge { font-size: 1.05rem; line-height: 1; }
.tepki-satir strong { font-weight: 600; }
.tepki-satir--bos {
    background: none;
    color: var(--ink-soft);
    font-size: .82rem;
    padding-inline: 0;
}