:root {
    --krem: #F7F3EA;
    --murekkep: #15120F;
    --lacivert: #121C27;
    --gece: #0A0F18;
    --bej: #D9B696;
    --bronz: #9A7250;
    --ust: 76px;
    --kenar: clamp(20px, 4.6vw, 76px);
    --serif: "Newsreader", "Times New Roman", Times, serif;
    --sans: "Manrope", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;   /* yalnız düğmeler */
    --yumusak: cubic-bezier(.22, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/*
 * Tek ekran = tek bölüm kuralı yalnız anasayfada (html.vitrin).
 * Belge değil, sabit yükseklikli İÇ KAP (.sayfa) kayar. Belge kaydığında telefonda tarayıcının adres çubuğu
 * açılıp kapanır, ekran yüksekliği kaydırma sırasında değişir, bölümler yeniden boyutlanır ve oturma takılır
 * (kullanıcı, 8 Eki 2026: "mobilde scroll çok bozuk"). İç kapta adres çubuğu yerinden oynamaz.
 */
html.vitrin, html.vitrin body { height: 100%; overflow: hidden; }
html.vitrin .sayfa {
    position: relative; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto;
    scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* Masaüstünde geçişi betik yürütür (tek hareket = tek bölüm, yumuşak kayarak); tarayıcının oturtması kapanır. */
html.vitrin.sayfali .sayfa { scroll-snap-type: none; }
body {
    margin: 0; background: var(--krem); color: var(--murekkep);
    font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-weight: 400; }
em { font-style: italic; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Tek ekran = tek bölüm ---------- */
.ekran {
    position: relative; overflow: hidden;
    height: 100vh; height: 100dvh;
    scroll-snap-align: start; scroll-snap-stop: always;
}
/* Arka plan görselli bölümler: masaüstü ve mobil görsel ayrı ayrı gelir. */
.gorselli { background-size: cover; background-position: center; background-image: var(--gorsel-masaustu); }

/* ---------- Üst çubuk ---------- */
.ust {
    position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--ust);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 0 var(--kenar); color: #fff;
    transition: color .6s var(--yumusak), transform .9s var(--yumusak);
}
/* En altta (alt bilgi göründüğünde) üst çubuk çekilir: kayan bölümün başlığını kesmesin. */
.ust[data-gizli] { transform: translateY(-105%); }
.ust::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
    background: rgba(10, 15, 24, .5);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: opacity .6s var(--yumusak), background-color .6s var(--yumusak);
}
.ust[data-zemin="var"]::before { opacity: 1; }
.ust[data-tema="acik"] { color: var(--murekkep); }
.ust[data-tema="acik"]::before { background: rgba(247, 243, 234, .97); }
.ust-menu { display: flex; gap: clamp(22px, 3.6vw, 58px); font-size: clamp(14px, 1.2vw, 18px); }
.ust-menu a { position: relative; padding: 6px 0; }
.ust-menu a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .7s var(--yumusak);
}
.ust-menu a:hover::after { transform: scaleX(1); }
.ust-logo { justify-self: center; position: relative; display: block; height: clamp(24px, 2.45vw, 38px); aspect-ratio: 890 / 200; }
.ust-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s var(--yumusak); }
.ust-logo .logo-koyu, .ust[data-tema="acik"] .ust-logo .logo-acik { opacity: 0; }
.ust[data-tema="acik"] .ust-logo .logo-koyu { opacity: 1; }
/* "Partner Girişi": B2B sitesindeki düğmenin aynısı — beyaz hap, solda koyu yuvarlak içinde altın
   üye simgesi; üzerine gelince yuvarlak büyüyüp düğmeyi doldurur, yazı açık altına döner. */
.partner {
    --tasma: 14;
    position: relative; isolation: isolate; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
    padding: 5px 20px 5px 5px; border-radius: 100px;
    background: #fff; color: #0A0A08; box-shadow: inset 0 0 0 1px rgba(10, 10, 8, .12);
    font-family: var(--sans); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    transition: color 320ms ease, transform 220ms ease, box-shadow 320ms ease;
}
.partner-ikon { position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: #D9BF85; }
.partner-ikon svg { display: block; width: 15px; height: 15px; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.partner-ikon::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #0A0A08;
    transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}
.partner:hover, .partner:focus-visible, .partner:active { color: #F4E6C1; box-shadow: inset 0 0 0 1px rgba(201, 168, 105, .6); }
.partner:hover, .partner:focus-visible { transform: translateY(-1px); }
.partner:hover .partner-ikon::before, .partner:focus-visible .partner-ikon::before, .partner:active .partner-ikon::before { transform: scale(var(--tasma)); }
.partner:hover .partner-ikon svg, .partner:focus-visible .partner-ikon svg { transform: scale(1.12); }
.partner:focus-visible { outline: 2px solid #C9A869; outline-offset: 3px; }
.ust-giris { justify-self: end; font-size: clamp(11px, .84vw, 12.5px); }
/* Üst çubukta telefonda kısa yazı ("Partner") görünür; tam yazı ekran okuyucuya ve masaüstüne kalır. */
.partner-yazi--kisa { display: none; }
/* Telefon menüsündeki hâli: üst çubuktaki düğmenin bir boy büyüğü, bağlantıların altında sola yaslı. */
.partner--menu { align-self: flex-start; margin-top: 26px; padding: 5px 22px 5px 5px; gap: 11px; font-size: 12px; }
.partner--menu .partner-ikon { width: 34px; height: 34px; }
.partner--menu .partner-ikon svg { width: 16px; height: 16px; }
.ust-ac { display: none; justify-self: start; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; background: none; color: inherit; cursor: var(--rg-imlec, pointer); }
.ust-ac svg { width: 24px; height: 24px; }

/* ---------- Dil seçimi (TR / EN, inc/dil.php): üst çubukta partner düğmesinin solunda, telefonda menüde ---------- */
.ust-sag { justify-self: end; display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); }
.dil-sec { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .28); }
.dil-sec a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border-radius: 100px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1; color: inherit; opacity: .62; transition: background .2s, color .2s, opacity .2s; }
.dil-sec a:hover { opacity: 1; }
.dil-sec a[aria-current] { opacity: 1; background: #fff; color: #0B0D10; }
.dil-sec svg { flex: none; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .2); }
.ust[data-tema="acik"] .dil-sec { border-color: rgba(11, 13, 16, .16); }
.ust[data-tema="acik"] .dil-sec a[aria-current] { background: var(--murekkep); color: #F7F3EA; }
.dil-sec a:focus-visible { outline: 2px solid #C9A869; outline-offset: 2px; }
.menu .dil-sec { align-self: flex-start; margin-top: 22px; }
.menu .dil-sec a:not(.partner) { font-size: 11px; line-height: 1; }

/* ---------- Düğmeler: B2B sitesindeki hap düğmelerin aynısı (altın ışıltılı / beyaz) ---------- */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    padding: clamp(15px, 1.25vw, 19px) clamp(26px, 2.9vw, 48px); border-radius: 100px;
    font-family: var(--sans); font-size: clamp(12px, .92vw, 14px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    color: #0A0A08;
    transition: filter 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.dugme--altin {
    background-image: linear-gradient(90deg, #C9A869 0%, #B8965A 18%, #F4E6C1 50%, #B8965A 82%, #C9A869 100%);
    background-size: 220% 100%; background-position: 0% 50%;
    animation: altinIsilti 1.5s linear infinite alternate;
}
.dugme--beyaz { background-color: #fff; box-shadow: inset 0 0 0 1px rgba(10, 10, 8, .1); }
.dugme:hover { filter: brightness(1.06); transform: translateY(-1px); }
.dugme--beyaz:hover { filter: none; background-color: #F4E6C1; }
.dugme:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@keyframes altinIsilti { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- 1. Hero ---------- */
.hero { background: #0B0D10; color: #fff; }
.hero-arka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-perde {
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 9, 11, .74) 0%, rgba(8, 9, 11, .4) 38%, rgba(8, 9, 11, 0) 68%),
        linear-gradient(180deg, rgba(8, 9, 11, .42) 0%, rgba(8, 9, 11, 0) 24%),
        /* yazılar altta durduğu için alttan hafif bir koyuluk: açık renkli sahnelerde de okunur */
        linear-gradient(0deg, rgba(8, 9, 11, .5) 0%, rgba(8, 9, 11, 0) 46%);
}
/* Yazılar ekranın ALTINDA durur (Salih Bey, 13 Eki 2026: ortada kalıyor, videodaki yüzün üstüne biniyordu).
   Sağ alttaki durdurma düğmesiyle aynı tabandan biraz yukarıda. */
.hero-ic { position: absolute; left: var(--kenar); right: var(--kenar); bottom: clamp(52px, 10.5vh, 112px); }
.hero-ustyazi { font-size: clamp(11px, 1vw, 15px); letter-spacing: .2em; color: #DDC7A6; margin-bottom: 1em; }
.hero h1 { font-size: calc(clamp(52px, 7.3vw, 140px) * var(--bs, 1)); line-height: .98; letter-spacing: -.02em; }
.hero h1 em { display: block; color: var(--bej); }
/* İki düğme BİREBİR aynı boyda: sütunlar eşit, genişliği uzun yazılı olan belirler (Salih Bey, 8 Eki 2026). */
.hero-dugmeler { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(22px, 3.6vh, 46px); }
.hero-dur {
    position: absolute; right: var(--kenar); bottom: clamp(20px, 5vh, 46px);
    width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: var(--rg-imlec, pointer);
    border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .2); color: #fff;
    display: grid; place-items: center; transition: background-color .5s var(--yumusak);
}
.hero-dur:hover { background: rgba(255, 255, 255, .18); }
.hero-dur svg { width: 16px; height: 16px; }
.hero-dur .oynat, .hero-dur[aria-pressed="true"] .durdur { display: none; }
.hero-dur[aria-pressed="true"] .oynat { display: block; }

/* ---------- 2. Koleksiyonu keşfedin ---------- */
.kesfet {
    --kart-oran: 0.88;
    --kart-bosluk: clamp(10px, 1.9vw, 30px);
    --kesfet-kenar: clamp(16px, 3vw, 50px);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--ust) + clamp(8px, 2.2vh, 28px)) var(--kesfet-kenar) clamp(18px, 3.6vh, 42px);
}
.kesfet h2 { font-size: calc(clamp(34px, 4.7vw, 88px) * var(--bs, 1)); line-height: 1.05; letter-spacing: -.015em; padding-left: clamp(4px, .9vw, 14px); margin-bottom: clamp(14px, 2.8vh, 32px); }
/* Kart sayısı panelden gelir (--sutun; anasayfa.php yazar). Bölümün yüksekliği dört kartlı düzendekiyle aynı
   kalır; kart sayısı arttıkça kartlar daralır, azaldıkça genişler. Yedi ve sekiz kartta iki sıra olur. */
.kartlar {
    flex: 0 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--sutun, 4), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--kart-bosluk);
    /* dört kartlı düzenin kart genişliği × oran + ad satırı; ekran kısaysa sığacak kadar küçülür */
    height: calc((100vw - 2 * var(--kesfet-kenar) - 3 * var(--kart-bosluk)) / 4 * var(--kart-oran) + 54px);
}
/* Beş ve üstü sütunda kartlar dar: aralık ve ad satırı biraz küçülür, uzun ad kesilmeden alta iner. */
.kartlar[data-sik] { --kart-bosluk: clamp(8px, 1.3vw, 20px); }
.kartlar[data-sik] .kart-alt { font-size: clamp(13px, 1.08vw, 18px); gap: 8px; }
.kartlar[data-sik] .kart-alt svg { width: clamp(16px, 1.25vw, 22px); }
.kartlar[data-iki-sira] { height: calc((100vw - 2 * var(--kesfet-kenar) - 3 * var(--kart-bosluk)) / 4 * var(--kart-oran) * 1.5 + 108px); }
.kart { display: flex; flex-direction: column; min-height: 0; }
.kart figure { flex: 1; min-height: 0; overflow: hidden; background: #E9E2D6; }
.kart img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--yumusak); }
.kart:hover img { transform: scale(1.045); }
.kart-alt { display: flex; align-items: center; justify-content: space-between; padding: clamp(10px, 1.7vh, 18px) clamp(6px, .9vw, 14px) 0; font-size: clamp(15px, 1.32vw, 21px); }
.kart-alt svg { width: clamp(20px, 1.6vw, 28px); height: auto; flex: none; transition: transform .8s var(--yumusak); }
.kart:hover .kart-alt svg { transform: translateX(6px); }

/* ---------- 3. Yeni sezon ---------- */
/* Dar pencerede görsel yanlardan kırpılır; kazaklar sağda durduğu için kırpmanın çoğu soldan alınır. */
.sezon { background-color: #EDE6DB; background-position: 65% center; }
.sezon-ic { position: absolute; left: var(--kenar); top: 50%; transform: translateY(-48%); }
.sezon h2 { font-size: calc(clamp(40px, 6vw, 114px) * var(--bs, 1)); line-height: 1; letter-spacing: -.02em; }
.sezon h2 span { display: block; }
.sezon-not { font-size: clamp(14px, 1.5vw, 23px); margin: .75em 0 1.15em; padding-left: .2em; }
/*
 * Ürünlü hâl (Salih Bey, 8 Eki 2026): büyük görselin yerine yan yana kayan ürün kartları. Ürünler B2B
 * panelindeki Çok Satanlar listesinden gelir; liste boşsa bölüm yukarıdaki görselli hâliyle çizilir.
 * Fotoğraflar 3:4. Kart yüksekliği ekrana göre hesaplanır (--foto-y): başlık, kart yazıları ve boşluklar
 * düşüldükten sonra kalan yer; böylece bölüm her ekranda tek ekrana sığar.
 */
.sezon--urunlu {
    --foto-y: clamp(170px, calc(100vh - var(--ust) - 262px), 660px);
    --foto-y: clamp(170px, calc(100dvh - var(--ust) - 262px), 660px);
    display: flex; flex-direction: column; justify-content: center;
    padding: calc(var(--ust) + clamp(4px, 1.6vh, 22px)) 0 clamp(16px, 3.2vh, 38px);
}
.sezon-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--kenar); margin-bottom: clamp(14px, 2.6vh, 28px); }
.sezon--urunlu h2 { font-size: calc(clamp(34px, 4.3vw, 82px) * var(--bs, 1)); line-height: 1.04; letter-spacing: -.018em; }
.sezon--urunlu h2 span { display: inline; }
.sezon--urunlu .sezon-not { font-size: clamp(14px, 1.3vw, 20px); margin: .45em 0 0; }
.sezon-yan { flex: none; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); padding-bottom: 4px; }
.sezon-yan .dugme { padding: clamp(13px, 1.05vw, 16px) clamp(22px, 2.2vw, 36px); }
.serit-oklar { display: flex; gap: 8px; }
.serit-ok {
    width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: var(--rg-imlec, pointer);
    display: grid; place-items: center; color: var(--murekkep);
    border: 1px solid rgba(21, 18, 15, .32); background: transparent;
    transition: background-color .5s var(--yumusak), color .5s var(--yumusak), opacity .5s var(--yumusak);
}
.serit-ok svg { width: 20px; height: auto; }
.serit-ok:hover:not(:disabled) { background: var(--murekkep); color: var(--krem); }
.serit-ok:disabled { opacity: .28; cursor: var(--rg-imlec, default); }
.serit {
    display: flex; gap: clamp(12px, 1.5vw, 24px);
    overflow-x: auto; overflow-y: hidden; padding: 0 var(--kenar);
    scroll-snap-type: x proximity; scroll-padding-left: var(--kenar);
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.serit::-webkit-scrollbar { display: none; }
.urun { flex: none; width: calc(var(--foto-y) * .75); display: flex; flex-direction: column; scroll-snap-align: start; }
.urun figure { height: var(--foto-y); overflow: hidden; background: #fff; }
.urun img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--yumusak); }
.urun:hover img { transform: scale(1.035); }
.urun-ad { margin-top: clamp(9px, 1.5vh, 15px); font-size: clamp(15px, 1.22vw, 19px); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urun-renkler { display: flex; align-items: center; gap: 6px; height: 13px; margin-top: 8px; }
.urun-renkler i { flex: none; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(21, 18, 15, .2); }
.urun-renkler b { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .04em; color: rgba(21, 18, 15, .6); margin-left: 2px; }
/* Dokunmatik ekranda parmakla kaydırılır: oklar gereksiz. */
@media (hover: none) { .serit-oklar { display: none; } }

/* ---------- 4. Yakından bakınca ---------- */
.yakin { background-color: #19202A; color: #fff; }
.yakin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(14, 19, 27, .8) 0%, rgba(14, 19, 27, .38) 42%, rgba(14, 19, 27, 0) 70%); }
.yakin-ic { position: absolute; z-index: 1; right: var(--kenar); top: 50%; transform: translateY(-50%); }
/* Yazı düzeni hero'daki tatla aynı (kullanıcı, 8 Eki 2026): altın küçük üst yazı, beyaz başlık, altın italik ikinci satır. */
.yakin-ustyazi { font-size: clamp(11px, 1vw, 15px); letter-spacing: .2em; color: #DDC7A6; margin-bottom: 1.1em; }
.yakin h2 { font-size: calc(clamp(34px, 4.7vw, 92px) * var(--bs, 1)); line-height: 1.02; letter-spacing: -.018em; }
.yakin h2 em { display: block; color: var(--bej); }

/* ---------- 5. Yerli Üretim / Global Vizyon ---------- */
/* MASAÜSTÜNDE küre ekrana tam sığar (Salih Bey, 13 Eki 2026): eskiden sağ kenardan taşıyordu, yarım kalmış gibi
   duruyordu. Çap hem genişliğe hem yüksekliğe bağlı; sağ kenarı üst çubuktaki düğmeyle aynı hizada biter.
   Telefon düzeni ayrıdır (aşağıda): orada küre bilerek büyüktür. */
.dunya { background: var(--krem); --cap: min(40vw, 76vh); --kure-bosluk: clamp(40px, 5vw, 96px); }
.dunya-ic { position: absolute; z-index: 2; left: var(--kenar); top: 50%; transform: translateY(-46%); max-width: 46vw; }
.dunya h2 { font-size: calc(clamp(38px, 4.9vw, 94px) * var(--bs, 1)); line-height: 1.04; letter-spacing: -.015em; }
.dunya h2 em { display: block; color: var(--bronz); }
.dunya-metin { font-size: clamp(15px, 1.7vw, 27px); margin-top: .7em; }
.sayaclar { display: flex; margin: clamp(18px, 3.8vh, 42px) 0 clamp(20px, 4vh, 46px); }
.sayac { padding-right: clamp(18px, 4.2vw, 66px); }
.sayac + .sayac { padding-left: clamp(18px, 4.2vw, 66px); border-left: 1px solid rgba(21, 18, 15, .28); }
.sayac b { display: block; font-weight: 400; font-size: clamp(28px, 3.25vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.sayac span { display: block; font-size: clamp(14px, 1.48vw, 23px); margin-top: .2em; }
/* Küre: bölüme gelince BİR tur dönüp duran video, daire içinde. Videodaki küre karenin %88,6'sını doldurur → biraz büyütülüp kenarı kırpılır. */
.kure {
    /* Masaüstü: sağda, kenar boşluğu kadar içeride; dikeyde yazı bloğuyla aynı eksende. Hiçbir kenardan taşmaz. */
    position: absolute; width: var(--cap); height: var(--cap);
    right: var(--kenar); top: calc(54.6% - var(--cap) / 2);
    border-radius: 50%; overflow: hidden; background: #0D121A;
}
.kure video, .kure img { position: absolute; left: -6.8%; top: -6.8%; width: 113.6%; height: 113.6%; object-fit: cover; }

/* Masaüstünde yazı bloğu küreye yaslanır ve kürenin yatay ekseninde ortalanır: ikisi tek kompozisyon olur
   (kullanıcı, 8 Eki 2026: küre küçülünce yazılar "ayrı gayrı" kalmıştı). Telefon düzenine dokunulmaz. */
@media (min-width: 761px) {
    .dunya-ic {
        left: auto; right: calc(var(--kenar) + var(--cap) + var(--kure-bosluk));
        top: 54.6%; transform: translateY(-50%);
        width: max-content; max-width: calc(100% - 2 * var(--kenar) - var(--cap) - var(--kure-bosluk));
    }
    .dunya h2 { font-size: calc(clamp(40px, 5.8vw, 112px) * var(--bs, 1)); }
    .dunya-metin { font-size: clamp(16px, 2vw, 32px); }
    .sayaclar { margin: clamp(20px, 4.4vh, 48px) 0 clamp(22px, 4.6vh, 52px); }
    .sayac b { font-size: clamp(30px, 3.8vw, 72px); }
    .sayac span { font-size: clamp(15px, 1.7vw, 27px); }
}

/* ---------- Alt bilgi ---------- */
.alt { background: var(--lacivert); color: #fff; text-align: center; scroll-snap-align: end; }
.alt-ic { padding: clamp(30px, 5.4vh, 56px) var(--kenar) clamp(24px, 4vh, 42px); }
.alt-logo { display: block; margin: 0 auto; height: clamp(28px, 2.9vw, 44px); width: auto; }
.alt-menu { display: flex; justify-content: center; margin-top: clamp(18px, 2.8vh, 30px); font-size: clamp(14px, 1.22vw, 18px); }
.alt-menu a { padding: 2px clamp(14px, 2.3vw, 36px); }
.alt-menu a + a { border-left: 1px solid rgba(255, 255, 255, .22); }
.alt-menu a:hover { color: var(--bej); }
/* Sosyal bağlantılar (Site Ayarları › İletişim Bilgileri). Alt bilgi her sayfada olduğu için burada durur:
   anasayfa bilgi.css'i yüklemez, simge boyutsuz kalıp ekranı kaplıyordu (14 Eki 2026). */
.alt-sosyal { display: flex; justify-content: center; gap: 10px; margin-top: clamp(16px, 2.4vh, 26px); }
.alt-sosyal a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); transition: border-color .25s ease, color .25s ease; }
.alt-sosyal a:hover { border-color: var(--bej); color: var(--bej); }
.alt-sosyal svg { width: 17px; height: 17px; }
.alt-telif { background: var(--gece); color: rgba(255, 255, 255, .55); font-size: 13px; padding: 14px var(--kenar); }

/* ---------- Başa dön: sağ altta, ilk ekrandan sonra belirir (masaüstü ve telefon) ---------- */
.basa-don {
    position: fixed; z-index: 40; right: var(--kenar); bottom: clamp(20px, 5vh, 46px);
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: var(--rg-imlec, pointer);
    display: grid; place-items: center;
    background: #fff; color: #0A0A08; box-shadow: inset 0 0 0 1px rgba(10, 10, 8, .1), 0 8px 24px rgba(10, 12, 16, .2);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .7s var(--yumusak), transform .9s var(--yumusak), background-color 200ms ease;
}
.basa-don[data-gorunur] { opacity: 1; transform: none; pointer-events: auto; }
.basa-don:hover { background: #F4E6C1; }
@media (min-width: 761px) { .basa-don[data-serit-ustunde] { opacity: 0; transform: translateY(12px); pointer-events: none; } }
.basa-don svg { width: 18px; height: 18px; transition: transform .6s var(--yumusak); }
.basa-don:hover svg { transform: translateY(-3px); }

/* ---------- Telefon menüsü ---------- */
.menu {
    position: fixed; inset: 0; z-index: 60; background: var(--lacivert); color: #fff;
    display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--kenar);
}
.menu[hidden] { display: none; }
.menu a:not(.partner) { font-size: clamp(30px, 9vw, 42px); line-height: 1.25; }
.menu-kapat { position: absolute; top: 10px; right: calc(var(--kenar) - 8px); width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: var(--rg-imlec, pointer); }
.menu-kapat svg { width: 24px; height: 24px; }

/* ---------- Bölüm ekrana oturunca içerik yumuşakça belirir ---------- */
.js .belir { opacity: 0; transform: translateY(22px); transition: opacity 1.1s var(--yumusak), transform 1.5s var(--yumusak); transition-delay: calc(var(--sira, 0) * 130ms + 120ms); }
.js .gorundu .belir { opacity: 1; transform: none; }

/* ---------- Telefon ---------- */
@media (max-width: 760px) {
    :root { --ust: 60px; }
    .gorselli { background-image: var(--gorsel-mobil); }
    .ust-menu { display: none; }
    .ust-ac { display: grid; place-items: center; }
    .ust-logo { height: 23px; }
    .ust-giris { padding: 3px 10px 3px 3px; gap: 6px; font-size: 9px; letter-spacing: .13em; --tasma: 8; }
    .ust-giris .partner-ikon { width: 20px; height: 20px; }
    .ust-giris .partner-ikon svg { width: 10px; height: 10px; }
    .ust-giris .partner-yazi--uzun { display: none; }
    .ust-giris .partner-yazi--kisa { display: inline; }
    .ust .dil-sec { display: none; }

    .hero-perde { background: linear-gradient(0deg, rgba(8, 9, 11, .82) 0%, rgba(8, 9, 11, .42) 44%, rgba(8, 9, 11, 0) 70%), linear-gradient(180deg, rgba(8, 9, 11, .42) 0%, rgba(8, 9, 11, 0) 20%); }
    .hero-ic { bottom: clamp(84px, 13vh, 124px); }
    .hero h1 { font-size: calc(clamp(44px, 13.4vw, 66px) * var(--bs, 1)); }
    .hero-dugmeler { display: grid; gap: 8px; }
    .hero-dugmeler .dugme { min-width: 0; padding: 15px 10px; font-size: clamp(9.5px, 2.75vw, 11.5px); letter-spacing: .08em; }
    .hero-dur { width: 40px; height: 40px; bottom: 22px; }
    .basa-don { width: 44px; height: 44px; bottom: 22px; }

    .kesfet { --kesfet-kenar: 14px; --kart-bosluk: 12px; --kart-oran: 0.94; }
    .kesfet h2 { font-size: calc(clamp(32px, 9.4vw, 44px) * var(--bs, 1)); padding-left: 2px; }
    /* Telefonda ikişerli; sıra sayısı kart sayısından gelir (--sira-m). Tek kalan son kart tam genişlikte durur. */
    .kartlar, .kartlar[data-sik], .kartlar[data-iki-sira] {
        --kart-bosluk: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--sira-m, 2), minmax(0, 1fr));
        height: calc(((100vw - 2 * var(--kesfet-kenar) - var(--kart-bosluk)) / 2 * var(--kart-oran) + 36px) * var(--sira-m, 2) + var(--kart-bosluk) * (var(--sira-m, 2) - 1));
    }
    .kartlar[data-tek] .kart:last-child { grid-column: 1 / -1; }
    .kartlar[data-sik] .kart-alt svg { width: 20px; }
    .kart-alt, .kartlar[data-sik] .kart-alt { font-size: 15px; padding: 8px 2px 0; }

    .sezon { background-position: center bottom; }
    .sezon-ic { top: calc(var(--ust) + 7vh); transform: none; }
    .sezon h2 { font-size: calc(clamp(44px, 13vw, 62px) * var(--bs, 1)); }
    .sezon-not { font-size: 16px; }
    /* Telefonda sıra: başlık, kartlar, düğme. Ekranda tam İKİ kart durur ve şerit ikişer ikişer ilerler
       (kullanıcı, 9 Eki 2026: tek kart göze hoş gelmiyordu). Kart genişliği şeridin yarısıdır; yükseklik
       ondan gelir (3:4). --foto-y yalnız çok kısa ekranda fotoğrafı kısaltan üst sınırdır. */
    .sezon--urunlu { --foto-y: calc(100vh - var(--ust) - 330px); --foto-y: calc(100dvh - var(--ust) - 330px); padding-bottom: clamp(14px, 2.6vh, 26px); }
    .sezon-ust { display: contents; }
    .sezon-baslik { order: 1; padding: 0 var(--kenar); margin-bottom: clamp(12px, 2.2vh, 22px); }
    .sezon--urunlu h2 { font-size: calc(clamp(34px, 10.4vw, 48px) * var(--bs, 1)); }
    .sezon--urunlu .sezon-not { font-size: 15px; }
    /* Kart arası boşluk kenar boşluğuna eşit: üçüncü kart tam ekranın dışında başlar, kenarda yarım kart kalmaz. */
    .serit { order: 2; gap: var(--kenar); scroll-snap-type: x mandatory; }
    .urun { width: calc((100% - var(--kenar)) / 2); scroll-snap-align: none; }
    .urun:nth-child(odd) { scroll-snap-align: start; scroll-snap-stop: always; }
    .urun figure { height: auto; aspect-ratio: 3 / 4; max-height: max(150px, var(--foto-y)); }
    .sezon-yan { order: 3; padding: clamp(14px, 2.4vh, 24px) var(--kenar) 0; }
    .sezon-yan .dugme { padding: 14px 26px; font-size: 11px; }
    .serit-oklar { display: none; }
    /* Dar kartta ad iki satıra kadar yazılır; tek satırlık adda da yer ayrılır ki renk noktaları hizalı kalsın. */
    .urun-ad { font-size: 14px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.5em; }
    .urun-renkler { gap: 5px; height: 11px; overflow: hidden; }
    .urun-renkler i { width: 11px; height: 11px; }

    .yakin { background-position: center top; }
    .yakin::after { background: linear-gradient(0deg, rgba(14, 19, 27, .86) 0%, rgba(14, 19, 27, .3) 46%, rgba(14, 19, 27, 0) 66%); }
    .yakin-ic { right: var(--kenar); left: var(--kenar); top: auto; bottom: clamp(64px, 12vh, 116px); transform: none; }
    .yakin h2 { font-size: calc(clamp(34px, 10.6vw, 48px) * var(--bs, 1)); }

    /* Yazı üstte, küre hemen altında: ikisi tek blok (kullanıcı, 8 Eki 2026: aradaki boşluk fazlaydı, yazılar küçüktü).
       Küre artık ekranın yüzdesine değil yazının bittiği yere bağlı. Ölçüler --o ile hem genişliğe hem yüksekliğe
       oranlanır: kısa ekranda yazı küçülür, küre yukarı gelir. */
    .dunya { --o: min(1vw, .52vh); display: flex; flex-direction: column; padding-top: calc(var(--ust) + 2.6vh); }
    .dunya-ic { position: relative; order: 1; left: auto; top: auto; transform: none; max-width: none; padding: 0 var(--kenar); }
    .dunya h2 { font-size: calc(var(--o) * 13 * var(--bs, 1)); }
    .dunya-metin { font-size: max(15px, calc(var(--o) * 4.6)); }
    .sayaclar { margin: calc(var(--o) * 5.4) 0 calc(var(--o) * 6); }
    .sayac b { font-size: calc(var(--o) * 9.6); }
    .sayac span { font-size: max(14px, calc(var(--o) * 4.3)); }
    .dunya .dugme { padding: calc(var(--o) * 4.4) calc(var(--o) * 9.4); font-size: max(12px, calc(var(--o) * 3.4)); }
    /* Telefonda küre bilerek ekrandan büyüktür ve alttan yükselir (kullanıcı kararı, 13 Eki 2026: masaüstünde
       tam görünsün, telefonda eski hâli kalsın). */
    .kure { --cap: 132vw; position: relative; order: 2; flex: none; top: auto; right: auto; left: calc(54vw - var(--cap) / 2); margin-top: calc(var(--o) * 5.6); }

    .alt-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; }
    .alt-menu a + a { border-left: 0; }
}
/* Çok kısa ekran (yan çevrilmiş telefon): içerik kesilmesin, serbest kaydırma. */
@media (max-height: 480px) {
    html.vitrin .sayfa { scroll-snap-type: none; }
    .ekran { height: auto; min-height: 100vh; min-height: 100dvh; }
    .kesfet { min-height: 620px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .belir { opacity: 1; transform: none; transition: none; }
    .kart img, .kart-alt svg, .dugme, .ust, .ust::before, .partner, .partner-ikon svg, .partner-ikon::before, .urun img, .serit-ok { transition: none; }
    .dugme--altin { animation: none; background-position: 50% 50%; }
    .basa-don, .basa-don svg { transition: none; }
}

/* ---------- Çerez bildirimi ---------- */
.cerez {
    position: fixed; z-index: 70; left: var(--kenar); right: var(--kenar); bottom: clamp(14px, 3vh, 28px);
    max-width: 560px; background: #fff; color: var(--murekkep); border-radius: 18px; padding: 18px 20px;
    box-shadow: 0 18px 50px -18px rgba(10, 15, 24, .45), 0 0 0 1px rgba(10, 10, 8, .08);
    font-family: var(--sans); font-size: 14px; line-height: 1.55;
}
.cerez[hidden] { display: none; }
.cerez p { margin: 0 0 12px; }
.cerez a { text-decoration: underline; text-underline-offset: 3px; }
.cerez-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.cerez button { font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border-radius: 100px; padding: 11px 20px; cursor: var(--rg-imlec, pointer); border: 1px solid rgba(10, 10, 8, .16); background: #fff; color: var(--murekkep); }
.cerez button[data-cerez="kabul"] { background: #0A0A08; border-color: #0A0A08; color: #fff; }

/* ---------- Bakım ve bulunamadı sayfaları ---------- */
.tek-ekran { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: var(--kenar); background: var(--lacivert); color: #fff; }
.tek-ekran img { height: 34px; width: auto; margin-bottom: 34px; }
.tek-ekran h1 { font-size: clamp(34px, 5vw, 72px); line-height: 1.05; letter-spacing: -.015em; }
.tek-ekran h1 em { display: block; color: var(--bej); }
.tek-ekran p { font-size: clamp(16px, 1.5vw, 21px); color: rgba(255, 255, 255, .72); margin-top: 1em; max-width: 46ch; }
.tek-ekran .dugme { margin-top: 30px; }

/*
 * Site imleci (15 Eki 2026; b2b.rugatchi.com ile aynı): yuvarlak köşeli siyah ok, ince beyaz kenarlı.
 * Yalnız html.rg-imlec olan sayfalarda (inc/sayfa/bas.php ve tek.php). Bu dosyalardaki "cursor: pointer/default"
 * değerleri var(--rg-imlec, …) ile yazıldı; yazı alanları kendi imlecini korur. Yönetim paneline uygulanmadı.
 */
html.rg-imlec {
    --rg-imlec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M3 3 17.6 10.8 9.9 12.8 5.2 18.6Z' fill='%23fff' stroke='%23fff' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M3 3 17.6 10.8 9.9 12.8 5.2 18.6Z' fill='%23111' stroke='%23111' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, default;
    cursor: var(--rg-imlec);
}
:where(html.rg-imlec) :where(a[href], button, summary, label, select, [role=button], [role=switch], [role=tab], [role=menuitem], [role=option],
    input:is([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=color], [type=range])) {
    cursor: var(--rg-imlec);
}
:where(html.rg-imlec) :where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=color], [type=range], [type=image]),
    textarea, [contenteditable]:not([contenteditable=false])) {
    cursor: auto;
}