/* ════════════════════════════════════════════════════════════════════════════
   TANITIM SAYFASI (tanitim.html, js/tanitim.js) — sitenin herkese açık ön yüzü. Sade, ferah, modern: açık zemin,
   derin lacivert açılış bölümü, tek vurgu rengi (--renk; Ayarlar → Tanıtım'dan seçilir), yumuşak gölgeler.
   Hareketler yalnız CSS'tir ve görünür olunca başlar; "hareketi azalt" tercihinde durur. Yazı tipi sistem yazısı
   (dışarıdan yazı tipi çekilmez; bkz. temel.css).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --renk: #6d5dfc;
    --renk-2: color-mix(in srgb, var(--renk) 70%, #22d3ee);
    --renk-3: color-mix(in srgb, var(--renk) 65%, #f472b6);
    --renk-koyu: color-mix(in srgb, var(--renk) 78%, black);
    --renk-acik: color-mix(in srgb, var(--renk) 10%, white);
    --zemin: #f7f7fb;
    --yuzey: #ffffff;
    --yazi: #10132a;
    --yazi-2: #535a76;
    --yazi-3: #8a90a8;
    --kenar: rgb(16 19 42 / .08);
    --gece: #0a0e1f;
    --golge: 0 1px 2px rgb(16 19 42 / .04), 0 18px 40px -24px rgb(16 19 42 / .28);
    --golge-buyuk: 0 30px 70px -30px rgb(16 19 42 / .45);
    --egri: cubic-bezier(.2, .8, .2, 1);
    --yaricap: 20px;
    --yazi-tipi: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --baslik-tipi: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 16px/1.6 var(--yazi-tipi); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { margin: 0; font-family: var(--baslik-tipi); letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }
.cekmece-acik { overflow: hidden; }
.kap { width: min(1200px, 100% - 40px); margin: 0 auto; }
[hidden] { display: none !important; }

/* İlk yükleme: içerik gelene kadar ince ilerleme çubuğu */
.ilk-yukleme { position: fixed; inset: 0 0 auto; z-index: 100; height: 3px; overflow: hidden; }
.ilk-yukleme i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--renk), transparent); animation: ilk-kay 1s ease-in-out infinite; }
@keyframes ilk-kay { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
body:not(.yukleniyor) .ilk-yukleme { display: none; }
/* Bilgi gelene kadar zemin koyu: açılış ve kapak koyu, arada açık renk parlamasın */
body.yukleniyor { background: var(--gece); }
.hata-sayfa { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 100vh; padding: 24px; text-align: center; }
.hata-sayfa b { font-size: 22px; }
.hata-sayfa p { color: var(--yazi-2); }

/* ── Düğmeler ── */
.dugme {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border: 0; border-radius: 14px;
    font-weight: 650; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: transform .2s var(--egri), box-shadow .25s, background-color .2s, color .2s;
}
.dugme.buyuk { height: 54px; padding: 0 26px; border-radius: 16px; font-size: 16px; }
.dugme.tam { width: 100%; }
.dugme.birincil { background: linear-gradient(135deg, var(--renk), var(--renk-koyu)); color: #fff; box-shadow: 0 14px 30px -14px var(--renk); }
.dugme.birincil:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px var(--renk); }
.dugme.cam { background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); backdrop-filter: blur(10px); }
.dugme.cam:hover { background: rgb(255 255 255 / .18); transform: translateY(-2px); }
.dugme.beyaz { background: #fff; color: var(--renk-koyu); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .4); }
.dugme.beyaz:hover { transform: translateY(-2px); }
.dugme.cizgi { background: var(--yuzey); color: var(--yazi); box-shadow: inset 0 0 0 1.5px var(--kenar); }
.dugme.cizgi:hover { box-shadow: inset 0 0 0 1.5px var(--renk); color: var(--renk-koyu); }
.dugme.hayalet { background: none; color: var(--yazi-2); }
.dugme.hayalet:hover { color: var(--yazi); }
.dugme:disabled { opacity: .6; cursor: default; transform: none; }
.dugme.bekliyor { color: transparent !important; position: relative; }
.dugme.bekliyor::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid #fff; border-right-color: transparent; border-radius: 50%; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ══════════ ÜST ÇUBUK ═════════════════════════════════════════════════════ */
.ust {
    position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 max(20px, calc((100% - 1200px) / 2));
    color: #fff; transition: background-color .35s, box-shadow .35s, color .35s, height .35s var(--egri);
}
.ust.dolu { height: 64px; background: rgb(255 255 255 / .82); color: var(--yazi); box-shadow: 0 1px 0 var(--kenar), 0 10px 30px -20px rgb(16 19 42 / .35); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.marka { display: flex; align-items: center; gap: 11px; font-weight: 750; font-size: 18px; letter-spacing: -.01em; }
.marka img { width: 38px; height: 38px; border-radius: 11px; object-fit: contain; background: #fff; padding: 3px; }
.marka-harf { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--renk), var(--renk-3)); color: #fff; font-size: 18px; }
.ust-nav { display: flex; gap: 4px; margin-left: auto; }
.ust-nav a { position: relative; padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; opacity: .85; transition: opacity .2s, background-color .2s; }
.ust-nav a:hover { opacity: 1; background: rgb(127 127 127 / .12); }
.ust-sag { display: flex; align-items: center; gap: 10px; }
.ust-telefon { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; font-weight: 650; opacity: .9; }
.ust-telefon:hover { opacity: 1; }
.ust-sepet, .ust-menu-dugme { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 13px; background: rgb(127 127 127 / .14); cursor: pointer; transition: background-color .2s; }
.ust-sepet:hover, .ust-menu-dugme:hover { background: rgb(127 127 127 / .24); }
.ust-menu-dugme { display: none; }
.sepet-sayi { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--renk); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--zemin); }

/* ══════════ KAPAK ═════════════════════════════════════════════════════════ */
.kapak {
    position: relative; display: grid; align-items: center; min-height: min(100svh, 920px); padding: 120px 0 90px; overflow: hidden;
    background: var(--gece); color: #fff; isolation: isolate;
}
.kapak-zemin { position: absolute; inset: 0; z-index: -2; }
.kapak-zemin img { width: 100%; height: 100%; object-fit: cover; animation: ken-burns 24s ease-in-out infinite alternate; }
.kapak-zemin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgb(10 14 31 / .92) 0%, rgb(10 14 31 / .65) 45%, rgb(10 14 31 / .25) 100%), linear-gradient(0deg, rgb(10 14 31 / .7), transparent 40%); }
@keyframes ken-burns { from { transform: scale(1.04); } to { transform: scale(1.16) translate(-1.5%, -1%); } }
.leke { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .7; animation: leke 18s ease-in-out infinite alternate; }
.leke.l1 { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: var(--renk); }
.leke.l2 { width: 38vw; height: 38vw; right: -8vw; top: 10vh; background: var(--renk-2); animation-delay: -6s; opacity: .5; }
.leke.l3 { width: 30vw; height: 30vw; left: 30vw; bottom: -14vw; background: var(--renk-3); animation-delay: -12s; opacity: .45; }
@keyframes leke { 50% { transform: translate(6vw, 4vh) scale(1.1); } 100% { transform: translate(-4vw, 8vh) scale(.95); } }
.kapak-izgara {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
}
.kapak-ic { width: min(1200px, 100% - 40px); margin: 0 auto; }
.kapak-rozet {
    display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 999px;
    background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); backdrop-filter: blur(8px);
    font-size: 14px; font-weight: 600; animation: yukari .8s var(--egri) .05s backwards;
}
.kapak-rozet i { width: 8px; height: 8px; border-radius: 50%; background: var(--renk-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--renk-2) 30%, transparent); animation: nabiz 2s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: 0 0 0 8px transparent; } }
.kapak-baslik { max-width: 880px; margin-top: 22px; font-size: clamp(38px, 6.4vw, 76px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.kelime { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-right: .22em; vertical-align: top; }
.kelime > span { display: inline-block; animation: kelime 1s var(--egri) backwards; }
.kelime:nth-child(3n) > span { background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--renk-2) 60%, white)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes kelime { from { transform: translateY(105%) rotate(4deg); opacity: 0; } }
.kapak-alt { max-width: 620px; margin-top: 22px; color: rgb(255 255 255 / .78); font-size: clamp(16px, 1.6vw, 19px); animation: yukari .9s var(--egri) .55s backwards; }
.kapak-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; animation: yukari .9s var(--egri) .7s backwards; }
@keyframes yukari { from { opacity: 0; transform: translateY(18px); } }
.kapak-istatistik { display: flex; flex-wrap: wrap; gap: 14px 42px; margin-top: 56px; animation: yukari .9s var(--egri) .85s backwards; }
.kapak-istatistik:empty { display: none; }
.kapak-istatistik div { display: grid; }
.kapak-istatistik b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kapak-istatistik span { color: rgb(255 255 255 / .6); font-size: 14px; }
.kapak-asagi { position: absolute; left: 50%; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; translate: -50% 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); animation: zipla 2.2s ease-in-out infinite; }
@keyframes zipla { 50% { transform: translateY(8px); } }

/* ── Açılış gösterisi ── */
.acilis { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--gece); color: #fff; cursor: pointer; overflow: hidden; }
.acilis::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--renk) 45%, transparent), transparent 55%); animation: acilis-isik 2.6s ease-out; }
@keyframes acilis-isik { from { transform: scale(.4); opacity: 0; } }
.acilis-ic { position: relative; display: grid; justify-items: center; gap: 14px; padding: 24px; text-align: center; }
.acilis-logo { width: 96px; height: 96px; border-radius: 26px; object-fit: contain; background: #fff; padding: 10px; animation: logo-gel 1s var(--egri) backwards; box-shadow: 0 20px 60px -10px color-mix(in srgb, var(--renk) 70%, transparent); }
.acilis-monogram { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: linear-gradient(135deg, var(--renk), var(--renk-3)); font-size: 46px; font-weight: 800; animation: logo-gel 1s var(--egri) backwards; }
@keyframes logo-gel { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.acilis-ad { font-size: clamp(32px, 6vw, 64px); font-weight: 800; letter-spacing: -.03em; }
.acilis-ad span { display: inline-block; animation: harf .7s var(--egri) backwards; }
@keyframes harf { from { transform: translateY(60%); opacity: 0; filter: blur(8px); } }
.acilis-slogan { color: rgb(255 255 255 / .7); font-size: clamp(15px, 2vw, 20px); animation: yukari .9s var(--egri) 1.1s backwards; }
.acilis-cizgi { position: absolute; left: 50%; bottom: 18%; width: 160px; height: 2px; translate: -50% 0; background: rgb(255 255 255 / .12); overflow: hidden; border-radius: 2px; }
.acilis-cizgi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--renk), var(--renk-2)); transform-origin: left; animation: dolum 2.2s var(--egri) forwards; }
@keyframes dolum { from { transform: scaleX(0); } }
.acilis.gidiyor { animation: perde-kalk .9s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes perde-kalk { to { clip-path: inset(0 0 100% 0); } }
.acilis.gidiyor .acilis-ic { animation: yukari-git .6s ease-in forwards; }
@keyframes yukari-git { to { transform: translateY(-40px); opacity: 0; } }
/* Gösteri sürerken kapak hareketleri bekler, perde kalkınca başlar */
body:not(.acildi) .kapak * { animation-play-state: paused; }

/* ══════════ BÖLÜMLER ══════════════════════════════════════════════════════ */
.bolum { padding: clamp(70px, 9vw, 120px) 0; }
.bolum-baslik { display: grid; justify-items: center; gap: 12px; max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.bolum-baslik h2, .hakkimizda-metin h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
.bolum-baslik p { color: var(--yazi-2); font-size: 17px; }
.bolum-ust { display: inline-flex; align-items: center; gap: 8px; color: var(--renk-koyu); font-size: 13px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.bolum-ust::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }

/* Görünür olunca beliren öğeler */
.belir { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--egri), transform .8s var(--egri); transition-delay: calc(var(--sira, 0) * 80ms); }
.belir.gorunur { opacity: 1; transform: none; }

/* ── Neden biz ── */
.ozellikler { position: relative; z-index: 2; margin-top: -60px; }
.ozellik-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ozellik { padding: 26px 24px; border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge); transition: transform .35s var(--egri), box-shadow .35s; }
.ozellik:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.ozellik-ikon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 15px; background: var(--renk-acik); color: var(--renk-koyu); transition: transform .4s var(--egri); }
.ozellik:hover .ozellik-ikon { transform: rotate(-8deg) scale(1.08); }
.ozellik h3 { margin-bottom: 8px; font-size: 19px; font-weight: 750; }
.ozellik p { color: var(--yazi-2); font-size: 15px; }

/* ── Hakkımızda ── */
.hakkimizda-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.hakkimizda-metin { display: grid; gap: 16px; justify-items: start; }
.hakkimizda-metin p { color: var(--yazi-2); font-size: 17px; }
.hakkimizda-saat { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 14px; background: var(--yuzey); box-shadow: var(--golge); color: var(--yazi) !important; font-size: 15px !important; font-weight: 600; }
.kolaj { display: grid; gap: 14px; }
.kolaj.k2 { grid-template-columns: 1fr 1fr; }
.kolaj.k3 { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; }
.kolaj.k3 .kolaj-foto:first-child { grid-row: span 2; }
.kolaj-foto { position: relative; min-height: 200px; padding: 0; border: 0; border-radius: 24px; overflow: hidden; cursor: zoom-in; box-shadow: var(--golge-buyuk); background: var(--renk-acik); }
.kolaj.k1 .kolaj-foto { aspect-ratio: 4 / 3; }
.kolaj-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--egri); }
.kolaj-foto:hover img { transform: scale(1.06); }

/* ── Vitrin ── */
.vitrin { background: linear-gradient(180deg, var(--zemin), color-mix(in srgb, var(--renk) 4%, var(--zemin))); }
.vitrin-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.vitrin-ara { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 380px; height: 50px; padding: 0 16px; border-radius: 15px; background: var(--yuzey); box-shadow: var(--golge); color: var(--yazi-3); transition: box-shadow .2s; }
.vitrin-ara:focus-within { box-shadow: 0 0 0 2px var(--renk), var(--golge); }
.vitrin-ara input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--yazi); font: inherit; }
.tur-cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.tur-cipler::-webkit-scrollbar { display: none; }
.tur-cip { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--kenar); color: var(--yazi-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.tur-cip small { color: var(--yazi-3); font-size: 12px; }
.tur-cip:hover { color: var(--yazi); box-shadow: inset 0 0 0 1px var(--renk); }
.tur-cip[aria-selected="true"] { background: var(--yazi); color: #fff; box-shadow: none; }
.tur-cip[aria-selected="true"] small { color: rgb(255 255 255 / .6); }

.vitrin-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.kart { display: flex; flex-direction: column; min-width: 0; border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge); overflow: hidden; transition: transform .35s var(--egri), box-shadow .35s; }
.kart:hover { transform: translateY(-6px); box-shadow: var(--golge-buyuk); }
.kart-resim { position: relative; aspect-ratio: 1; background: linear-gradient(135deg, var(--renk-acik), color-mix(in srgb, var(--renk-2) 10%, white)); overflow: hidden; }
.kart-resim img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #fff; transition: transform .7s var(--egri); }
.kart:hover .kart-resim img { transform: scale(1.07); }
.kart-harf { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--renk) 45%, white); font-size: 64px; font-weight: 800; }
.kart-rozetler { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.rozet { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; backdrop-filter: blur(8px); }
.rozet.cok { background: rgb(255 255 255 / .9); color: #b45309; }
.rozet.cok svg { fill: #f59e0b; stroke: #f59e0b; }
.rozet.indirim { background: #e11d48; color: #fff; }
.rozet.tukendi { background: rgb(16 19 42 / .8); color: #fff; }
.kart-govde { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 16px 16px 16px; }
.kart-tur { color: var(--yazi-3); font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.kart h3 { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kart-alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.kart-fiyat { display: grid; line-height: 1.2; }
.kart-fiyat b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kart-fiyat s { color: var(--yazi-3); font-size: 13px; }
.kart-fiyat small { color: var(--yazi-3); font-size: 12.5px; }
.sepet-kontrol { display: flex; align-items: center; }
.sepet-kontrol .ekle {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 12px;
    background: var(--yazi); color: #fff; font-size: 13.5px; font-weight: 650; cursor: pointer; transition: background-color .2s, transform .2s var(--egri);
}
.sepet-kontrol .ekle:hover { background: var(--renk-koyu); transform: translateY(-1px); }
.sepet-kontrol:has(.miktar) { gap: 2px; padding: 3px; border-radius: 12px; background: var(--renk-acik); animation: buyu .3s var(--egri); }
.sepet-kontrol:has(.miktar) button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: var(--yuzey); color: var(--renk-koyu); cursor: pointer; box-shadow: var(--golge); }
.sepet-kontrol .miktar { min-width: 54px; color: var(--renk-koyu); font-size: 13.5px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
@keyframes buyu { from { transform: scale(.85); } }
.iskelet { pointer-events: none; }
.iskelet i { display: block; aspect-ratio: 1; background: linear-gradient(90deg, #eef0f6, #f8f9fc, #eef0f6); background-size: 200% 100%; animation: iskelet 1.3s linear infinite; }
.iskelet b, .iskelet span { display: block; height: 14px; margin: 14px 16px 0; border-radius: 7px; background: #eef0f6; }
.iskelet span { width: 50%; margin-bottom: 18px; }
@keyframes iskelet { to { background-position: -200% 0; } }
.bos-not { grid-column: 1 / -1; padding: 40px 0; color: var(--yazi-3); text-align: center; }
.daha { display: flex; margin: 34px auto 0; }
.ucan { position: fixed; z-index: 95; border-radius: 20px; overflow: hidden; pointer-events: none; }

/* Öne çıkanlar: iri, yatay kartlar */
.one-cikan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 18px; margin-bottom: 40px; }
.kart.buyuk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); border-radius: 26px; }
.kart.buyuk .kart-resim { aspect-ratio: auto; min-height: 260px; }
.kart.buyuk .kart-govde { justify-content: center; gap: 8px; padding: 26px; }
.kart.buyuk h3 { font-size: 22px; -webkit-line-clamp: 3; }
.kart.buyuk .kart-fiyat b { font-size: 26px; }
.kart.buyuk::before { content: "Öne çıkan"; position: absolute; }
.kart.buyuk { position: relative; }
.kart.buyuk::before { top: 14px; right: 14px; z-index: 3; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--renk), var(--renk-3)); color: #fff; font-size: 12px; font-weight: 750; }

/* ── Kataloglar ── */
.katalog-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 28px 22px; }
.katalog { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.katalog-kapak { position: relative; aspect-ratio: 3 / 4; margin-bottom: 8px; border-radius: 6px 16px 16px 6px; overflow: hidden; background: var(--renk-acik); box-shadow: var(--golge-buyuk); transform: perspective(900px) rotateY(0); transform-origin: left; transition: transform .6s var(--egri), box-shadow .6s; }
.katalog:hover .katalog-kapak { transform: perspective(900px) rotateY(-14deg); box-shadow: 24px 30px 60px -30px rgb(16 19 42 / .55); }
.katalog-kapak img { width: 100%; height: 100%; object-fit: cover; }
.katalog-sirt { position: absolute; inset: 0 auto 0 0; width: 14px; background: linear-gradient(90deg, rgb(0 0 0 / .25), rgb(255 255 255 / .15), transparent); }
.katalog b { font-size: 16.5px; }
.katalog > span { display: inline-flex; align-items: center; gap: 6px; color: var(--yazi-3); font-size: 13.5px; }

/* ── Galeri ── */
.galeri { background: var(--yuzey); }
.galeri-izgara { columns: 3 260px; column-gap: 16px; }
.galeri-foto { display: block; width: 100%; margin-bottom: 16px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; break-inside: avoid; background: var(--renk-acik); }
.galeri-foto img { width: 100%; transition: transform .7s var(--egri), filter .4s; }
.galeri-foto:hover img { transform: scale(1.05); }

/* ── Çağrı ── */
.cagri { padding: 20px 0 clamp(60px, 8vw, 100px); }
.cagri-kutu {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(32px, 5vw, 56px);
    border-radius: 32px; background: linear-gradient(120deg, var(--renk-koyu), var(--renk) 55%, var(--renk-3)); color: #fff; overflow: hidden; isolation: isolate;
}
.cagri-kutu::before { content: ""; position: absolute; inset: -40% -10% auto auto; z-index: -1; width: 420px; height: 420px; border-radius: 50%; background: rgb(255 255 255 / .12); animation: leke 14s ease-in-out infinite alternate; }
.cagri-kutu h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; }
.cagri-kutu p { margin-top: 8px; color: rgb(255 255 255 / .82); font-size: 17px; }
.cagri-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── İletişim ── */
.iletisim-ic { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 20px; }
.iletisim-kart { display: grid; align-content: start; gap: 6px; padding: 22px; border-radius: 26px; background: var(--yuzey); box-shadow: var(--golge); }
.iletisim-satir { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; transition: background-color .2s; }
a.iletisim-satir:hover { background: var(--renk-acik); }
.iletisim-ikon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--renk-acik); color: var(--renk-koyu); }
.iletisim-satir div { display: grid; min-width: 0; line-height: 1.35; }
.iletisim-satir small { color: var(--yazi-3); font-size: 13px; }
.iletisim-satir b { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.sosyal { display: flex; gap: 10px; padding: 12px; }
.sosyal a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--zemin); color: var(--yazi-2); transition: all .2s; }
.sosyal a:hover { background: var(--renk); color: #fff; transform: translateY(-2px); }
.iletisim-kart .dugme { margin: 8px 12px 4px; justify-self: start; }
.harita { position: relative; min-height: 420px; border-radius: 26px; overflow: hidden; background: linear-gradient(135deg, var(--renk-acik), #eef6ff); box-shadow: var(--golge); }
.harita iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.9); }
.harita-yer { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--yazi-3); text-align: center; padding: 20px; }

/* ── Alt bilgi ── */
.alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 28px max(20px, calc((100% - 1200px) / 2)) 34px; border-top: 1px solid var(--kenar); color: var(--yazi-3); font-size: 14px; }
.alt div { display: grid; }
.alt b { color: var(--yazi); }
.alt-imza { font-size: 13px; }

/* ── Yönetim girişi: sağ altta küçük, üstüne gelince açılan düğme ── */
.yonetim {
    position: fixed; right: 18px; bottom: 18px; z-index: 50; display: inline-flex; align-items: center; gap: 0; height: 42px; padding: 0 11px;
    border-radius: 999px; background: rgb(16 19 42 / .78); color: #fff; box-shadow: 0 10px 30px -10px rgb(16 19 42 / .6); backdrop-filter: blur(10px);
    font-size: 13.5px; font-weight: 650; overflow: hidden; opacity: .75; transition: opacity .25s, gap .35s var(--egri), padding .35s var(--egri);
}
.yonetim span { max-width: 0; white-space: nowrap; overflow: hidden; transition: max-width .35s var(--egri); }
.yonetim:hover, .yonetim:focus-visible { opacity: 1; gap: 8px; padding: 0 16px 0 13px; }
.yonetim:hover span, .yonetim:focus-visible span { max-width: 160px; }

/* ══════════ SEPET ÇEKMECESİ ═══════════════════════════════════════════════ */
.cekmece-perde { position: fixed; inset: 0; z-index: 60; background: rgb(10 14 31 / .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.cekmece-perde.acik { opacity: 1; }
.cekmece {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(440px, 100%);
    background: var(--yuzey); box-shadow: -30px 0 80px -30px rgb(10 14 31 / .5); transform: translateX(100%); transition: transform .4s var(--egri);
}
.cekmece.acik { transform: none; }
.cekmece header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--kenar); }
.cekmece h2 { font-size: 22px; font-weight: 800; }
.cekmece-kapat { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: var(--zemin); cursor: pointer; }
.cekmece-govde { flex: 1; overflow-y: auto; padding: 14px 22px; }
.cekmece-alt { display: grid; gap: 10px; padding: 18px 22px 22px; border-top: 1px solid var(--kenar); }
.sepet-bos { display: grid; justify-items: center; gap: 8px; padding: 60px 0; color: var(--yazi-3); text-align: center; }
.sepet-bos b { color: var(--yazi); font-size: 18px; }
.sepet-kalem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kenar); animation: yukari .4s var(--egri) backwards; }
.sepet-resim { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--renk-acik); color: var(--renk-koyu); font-size: 24px; font-weight: 800; }
.sepet-resim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sepet-ic { display: grid; gap: 2px; min-width: 0; }
.sepet-ic b { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
.sepet-ic small { color: var(--yazi-3); font-size: 13px; }
.sepet-miktar { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; }
.sepet-miktar button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: var(--zemin); cursor: pointer; }
.sepet-miktar span { min-width: 60px; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sepet-sag { display: grid; justify-items: end; gap: 8px; }
.sepet-sag b { font-variant-numeric: tabular-nums; }
.sepet-sil { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--yazi-3); cursor: pointer; }
.sepet-sil:hover { background: #fde7ec; color: #e11d48; }
.sepet-toplam { display: flex; align-items: baseline; justify-content: space-between; }
.sepet-toplam span { color: var(--yazi-2); }
.sepet-toplam b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sepet-not { color: var(--yazi-3); font-size: 12.5px; }
.siparis-form { display: grid; gap: 14px; padding: 4px 0; }
.form-giris { color: var(--yazi-2); font-size: 14.5px; }
.form-alan { display: grid; gap: 6px; }
.form-alan span { font-size: 14px; font-weight: 650; }
.form-alan input, .form-alan textarea { width: 100%; padding: 12px 14px; border: 0; border-radius: 13px; outline: 0; background: var(--zemin); box-shadow: inset 0 0 0 1px var(--kenar); color: var(--yazi); font: inherit; font-size: 15px; resize: vertical; transition: box-shadow .2s, background-color .2s; }
.form-alan input:focus, .form-alan textarea:focus { background: var(--yuzey); box-shadow: inset 0 0 0 2px var(--renk); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-hata { padding: 10px 14px; border-radius: 12px; background: #fde7ec; color: #be123c; font-size: 14px; font-weight: 600; }
.siparis-tamam { display: grid; justify-items: center; gap: 12px; padding: 50px 10px; text-align: center; }
.siparis-tamam h3 { font-size: 24px; font-weight: 800; }
.siparis-tamam p { color: var(--yazi-2); }
.tamam-no { padding: 6px 14px; border-radius: 999px; background: var(--renk-acik); color: var(--renk-koyu) !important; font-weight: 750; }
.tamam-isaret svg { width: 88px; height: 88px; stroke: #16a34a; stroke-width: 3; }
.tamam-isaret circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: ciz .7s var(--egri) forwards; fill: #dcfce7; }
.tamam-isaret path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ciz .5s var(--egri) .55s forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }

/* ══════════ GÖRÜNTÜLEYİCİ (katalog / galeri) ══════════════════════════════ */
.gorun { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr auto; background: rgb(8 10 22 / .94); color: #fff; opacity: 0; transition: opacity .3s; backdrop-filter: blur(6px); }
.gorun.acik { opacity: 1; }
.gorun header { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.gorun header b { font-size: 17px; }
.gorun-sayac { color: rgb(255 255 255 / .6); font-size: 14px; font-variant-numeric: tabular-nums; }
.gorun-kapat { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); cursor: pointer; }
.gorun-kapat:hover { background: rgb(255 255 255 / .2); }
.gorun-sahne { display: grid; place-items: center; min-height: 0; padding: 8px 70px; perspective: 1800px; touch-action: pan-y; }
.gorun-yaprak { display: flex; justify-content: center; gap: 0; max-width: 100%; max-height: 100%; }
.gorun-yaprak img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8); user-select: none; -webkit-user-drag: none; }
.katalog-kip .gorun-yaprak img { max-width: min(46vw, 100%); border-radius: 4px; }
.katalog-kip .gorun-yaprak img:first-child:not(:last-child) { border-radius: 8px 2px 2px 8px; }
.katalog-kip .gorun-yaprak img:last-child:not(:first-child) { border-radius: 2px 8px 8px 2px; }
.gorun-yaprak.ileri { animation: sayfa-ileri .6s var(--egri); transform-origin: left center; }
.gorun-yaprak.geri { animation: sayfa-geri .6s var(--egri); transform-origin: right center; }
@keyframes sayfa-ileri { from { transform: rotateY(-35deg) translateX(40px); opacity: 0; } }
@keyframes sayfa-geri { from { transform: rotateY(35deg) translateX(-40px); opacity: 0; } }
.gorun-ok { position: absolute; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; translate: 0 -50%; cursor: pointer; transition: background-color .2s; }
.gorun-ok:hover:not(:disabled) { background: rgb(255 255 255 / .22); }
.gorun-ok:disabled { opacity: .25; cursor: default; }
.gorun-ok.sol { left: 12px; }
.gorun-ok.sag { right: 12px; }
.gorun-kucukler { display: flex; gap: 8px; justify-content: safe center; padding: 12px 18px 18px; overflow-x: auto; scrollbar-width: none; }
.gorun-kucukler button { flex: none; width: 56px; height: 72px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; opacity: .45; cursor: pointer; transition: opacity .2s, transform .2s; background: rgb(255 255 255 / .08); }
.gorun-kucukler button img { width: 100%; height: 100%; object-fit: cover; }
.gorun-kucukler button.secili, .gorun-kucukler button:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--renk-2); }

/* ══════════ KIRILIMLAR ════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    .ust-nav { position: fixed; inset: 64px 12px auto; display: grid; gap: 2px; padding: 10px; border-radius: 20px; background: rgb(255 255 255 / .97); color: var(--yazi); box-shadow: var(--golge-buyuk); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s, transform .3s var(--egri); }
    .menu-acik .ust-nav { opacity: 1; transform: none; pointer-events: auto; }
    .ust-nav a { padding: 12px 14px; }
    .ust-menu-dugme { display: grid; }
    .ust-sag { margin-left: auto; }
    .ust-telefon span { display: none; }
    .ust-telefon { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 13px; box-shadow: none; background: rgb(127 127 127 / .14); }
    .hakkimizda-ic, .iletisim-ic { grid-template-columns: minmax(0, 1fr); }
    .kart.buyuk { grid-template-columns: minmax(0, 1fr); }
    .kart.buyuk .kart-resim { min-height: 0; aspect-ratio: 16 / 10; }
    .harita { min-height: 320px; }
}
@media (max-width: 560px) {
    .kap, .kapak-ic { width: calc(100% - 32px); }
    .ust { padding: 0 16px; gap: 12px; }
    .marka span { max-width: 44vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .kapak { padding-top: 104px; }
    .kapak-dugmeler .dugme { flex: 1 1 100%; }
    .vitrin-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .kart-govde { padding: 12px; }
    .kart h3 { font-size: 14.5px; }
    .kart-fiyat b { font-size: 17px; }
    .sepet-kontrol .ekle span { display: none; }
    .sepet-kontrol .ekle { width: 40px; padding: 0; justify-content: center; }
    .sepet-kontrol .miktar { min-width: 40px; font-size: 12.5px; }
    .gorun-sahne { padding: 8px 12px; }
    .gorun-ok { top: auto; bottom: 96px; translate: none; width: 44px; height: 44px; }
    .cagri-kutu { border-radius: 24px; }
    .yonetim { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .belir { opacity: 1; transform: none; }
}

/* ══════════ ŞABLONLAR (Ayarlar → Tanıtım → Tasarım) ═══════════════════════
   modern: yukarıdaki temel. market: canlı, iştah açan tonlar, hap düğmeler, sık vitrin. zarif: mermer / doğal taş / mobilya —
   fildişi zemin, bronz vurgu, serif başlık, mermer damarlı kapak, ince çizgili kartlar. sade: siyah-beyaz, düz, açık kapak. */

/* ── Market ── */
.sablon-market {
    --renk-2: color-mix(in srgb, var(--renk) 45%, #facc15);
    --renk-3: color-mix(in srgb, var(--renk) 30%, #fb923c);
    --zemin: #f5f9f3;
    --gece: #052315;
    --yaricap: 22px;
}
.sablon-market .dugme, .sablon-market .vitrin-ara, .sablon-market .sepet-kontrol .ekle { border-radius: 999px; }
.sablon-market .kapak-baslik { font-weight: 900; }
.sablon-market .kelime:nth-child(3n) > span { background: linear-gradient(100deg, #fde047, #fb923c); -webkit-background-clip: text; background-clip: text; }
.sablon-market .vitrin-izgara { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sablon-market .kart-fiyat b { color: #ea580c; }
.sablon-market .rozet.indirim { background: linear-gradient(135deg, #f97316, #e11d48); }
.sablon-market .kart-resim { background: linear-gradient(135deg, #ecfccb, #fef9c3); }
.sablon-market .sepet-kontrol .ekle { background: var(--renk); }
.sablon-market .sepet-kontrol .ekle:hover { background: var(--renk-koyu); }
.sablon-market .vitrin { background: linear-gradient(180deg, var(--zemin), #fffbeb); }
.sablon-market .ozellik-ikon { border-radius: 50%; }

/* ── Zarif (mermer / doğal taş) ── */
.sablon-zarif {
    --renk-2: color-mix(in srgb, var(--renk) 60%, #f5e6c8);
    --renk-3: color-mix(in srgb, var(--renk) 70%, #d6c2a3);
    --renk-acik: color-mix(in srgb, var(--renk) 9%, #fffdf9);
    --zemin: #f5f1ea;
    --yuzey: #fffdf9;
    --yazi: #1d1813;
    --yazi-2: #675d52;
    --yazi-3: #9a9086;
    --kenar: rgb(60 45 25 / .12);
    --gece: #14110e;
    --yaricap: 6px;
    --golge: 0 1px 0 var(--kenar);
    --golge-buyuk: 0 30px 60px -36px rgb(40 28 12 / .5);
    --baslik-tipi: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
.sablon-zarif h1, .sablon-zarif h2, .sablon-zarif h3 { font-weight: 500 !important; letter-spacing: -.01em; }
.sablon-zarif .kapak-baslik { font-size: clamp(40px, 6.6vw, 82px); line-height: 1.04; }
.sablon-zarif .kelime:nth-child(3n) > span { font-style: italic; background: linear-gradient(100deg, #f3e3c3, var(--renk-2)); -webkit-background-clip: text; background-clip: text; }
/* Mermer damarları: kapak görseli yoksa koyu taş zemin üzerinde ince, akan damarlar */
.sablon-zarif .kapak-zemin:not(:has(img)) {
    background:
        repeating-linear-gradient(115deg, transparent 0 60px, rgb(255 255 255 / .035) 61px 62px, transparent 63px 140px),
        repeating-linear-gradient(28deg, transparent 0 90px, rgb(214 194 163 / .05) 91px 92px, transparent 93px 210px),
        radial-gradient(ellipse at 70% 30%, #2a231c, var(--gece) 70%);
}
.sablon-zarif .leke { filter: blur(90px); opacity: .35; }
.sablon-zarif .kapak-izgara { display: none; }
.sablon-zarif .bolum-ust { letter-spacing: .32em; font-weight: 600; }
.sablon-zarif .bolum-ust::before { width: 34px; height: 1px; }
.sablon-zarif .dugme { border-radius: 4px; letter-spacing: .04em; }
.sablon-zarif .dugme.birincil { background: var(--renk); box-shadow: none; }
.sablon-zarif .dugme.birincil:hover { background: var(--renk-koyu); box-shadow: 0 16px 30px -18px var(--renk); }
.sablon-zarif .ozellik, .sablon-zarif .kart, .sablon-zarif .iletisim-kart { box-shadow: inset 0 0 0 1px var(--kenar); }
.sablon-zarif .ozellik:hover, .sablon-zarif .kart:hover { box-shadow: inset 0 0 0 1px var(--renk-2), var(--golge-buyuk); }
.sablon-zarif .ozellik-ikon { border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px var(--renk-2); }
.sablon-zarif .kart-resim { aspect-ratio: 4 / 5; background: linear-gradient(135deg, #ece4d8, #f8f4ee); }
.sablon-zarif .kart-harf { font-family: var(--baslik-tipi); color: #cdbfa9; }
.sablon-zarif .kart h3 { font-family: var(--baslik-tipi); font-size: 19px; }
.sablon-zarif .kart-fiyat b { font-weight: 600; }
.sablon-zarif .sepet-kontrol .ekle { border-radius: 4px; background: transparent; color: var(--yazi); box-shadow: inset 0 0 0 1px var(--yazi); }
.sablon-zarif .sepet-kontrol .ekle:hover { background: var(--yazi); color: #fff; }
.sablon-zarif .tur-cip { border-radius: 4px; }
.sablon-zarif .tur-cip[aria-selected="true"] { background: var(--renk); }
.sablon-zarif .kolaj-foto, .sablon-zarif .galeri-foto, .sablon-zarif .harita, .sablon-zarif .iletisim-kart { border-radius: 4px; }
.sablon-zarif .galeri-izgara { columns: 3 300px; }
.sablon-zarif .cagri-kutu { border-radius: 6px; background: linear-gradient(120deg, #1d1813, #3a2f24 60%, var(--renk)); }
.sablon-zarif .vitrin { background: var(--yuzey); }
.sablon-zarif .galeri { background: var(--zemin); }
.sablon-zarif .kapak-istatistik b { font-family: var(--baslik-tipi); font-weight: 500; font-size: 40px; }

/* ── Sade ── */
.sablon-sade {
    --gece: #ffffff;
    --renk-2: var(--renk);
    --renk-3: var(--renk);
    --zemin: #ffffff;
    --golge: 0 0 0 1px rgb(17 24 39 / .08);
    --golge-buyuk: 0 0 0 1px rgb(17 24 39 / .14), 0 20px 40px -28px rgb(17 24 39 / .35);
    --yaricap: 12px;
}
.sablon-sade .kapak { color: var(--yazi); min-height: min(86svh, 760px); }
.sablon-sade .leke, .sablon-sade .kapak-izgara { display: none; }
.sablon-sade .kapak-zemin:has(img)::after { background: linear-gradient(100deg, rgb(255 255 255 / .95), rgb(255 255 255 / .7) 50%, rgb(255 255 255 / .2)); }
.sablon-sade .kapak-rozet { background: #f3f4f6; box-shadow: none; }
.sablon-sade .kapak-alt, .sablon-sade .kapak-istatistik span { color: var(--yazi-2); }
.sablon-sade .kelime:nth-child(3n) > span { background: none; color: inherit; }
.sablon-sade .dugme.cam { background: none; color: var(--yazi); box-shadow: inset 0 0 0 1.5px var(--yazi); backdrop-filter: none; }
.sablon-sade .kapak-asagi { box-shadow: inset 0 0 0 1px var(--kenar); }
.sablon-sade .ust { color: var(--yazi); }
.sablon-sade .ozellikler { margin-top: 0; }
.sablon-sade .vitrin { background: #fafafa; }
.sablon-sade .cagri-kutu { background: var(--renk); }

/* ══════════ YORUMLAR ══════════════════════════════════════════════════════ */
.yorumlar { overflow: hidden; }
.yorum-ozet { display: inline-flex; align-items: center; gap: 10px; color: var(--yazi-2); }
.yorum-ozet:empty { display: none; }
.yorum-ozet b { color: var(--yazi); font-size: 22px; }
.yildizlar { display: inline-flex; gap: 2px; }
.yildizlar svg { color: #e5e7eb; fill: #e5e7eb; stroke: none; }
.yildizlar svg.dolu { color: #f59e0b; fill: #f59e0b; }
.yorum-akis { position: relative; }
.yorum-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.yorum-akis.kayan { margin: 0 calc(50% - 50vw); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.yorum-akis.kayan .yorum-serit { display: flex; width: max-content; animation: haber-kay var(--sure, 40s) linear infinite; }
.yorum-akis.kayan:hover .yorum-serit { animation-play-state: paused; }
.yorum-akis.kayan .yorum-kart { width: 340px; flex: none; margin-right: 18px; }
@keyframes haber-kay { to { transform: translateX(-50%); } }
.yorum-kart { display: grid; gap: 14px; align-content: start; margin: 0; padding: 24px; border-radius: var(--yaricap); background: var(--yuzey); box-shadow: var(--golge); }
.yorum-kart blockquote { margin: 0; color: var(--yazi); font-size: 15.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.yorum-kart blockquote::before { content: "“"; display: block; height: 22px; color: var(--renk); font: 700 48px/1 Georgia, serif; }
.yorum-kart figcaption { display: flex; align-items: center; gap: 12px; }
.yorum-kart figcaption div { display: grid; line-height: 1.3; }
.yorum-kart figcaption small { color: var(--yazi-3); font-size: 12.5px; }
.yorum-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--renk), var(--renk-3)); color: #fff; font-weight: 800; }
.yorum-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* Ortada açılan pencere */
.acilir-perde { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgb(10 14 31 / .5); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.acilir-perde.acik { opacity: 1; }
.acilir-kutu { position: relative; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border-radius: 26px; background: var(--yuzey); box-shadow: var(--golge-buyuk); transform: translateY(20px) scale(.97); transition: transform .35s var(--egri); }
.acilir-perde.acik .acilir-kutu { transform: none; }
.acilir-kapat { position: absolute; top: 16px; right: 16px; }
.yorum-pencere { display: grid; gap: 16px; }
.yorum-pencere h2 { padding-right: 44px; font-size: 22px; font-weight: 800; }
.form-sekmeler { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--zemin); }
.form-sekmeler button { flex: 1; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--yazi-2); font-weight: 650; cursor: pointer; }
.form-sekmeler button[aria-selected="true"] { background: var(--yuzey); color: var(--yazi); box-shadow: var(--golge); }
.puan-sec { display: flex; gap: 4px; }
.puan-sec button { padding: 2px; border: 0; background: none; color: #d1d5db; cursor: pointer; transition: transform .15s; }
.puan-sec button svg { fill: currentColor; stroke: none; }
.puan-sec button.dolu { color: #f59e0b; }
.puan-sec button:hover { transform: scale(1.15); }

/* Yönetici önizlemesi şeridi */
.onizleme-serit { position: fixed; left: 50%; top: 80px; z-index: 45; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; translate: -50% 0; background: #fbbf24; color: #3b2a00; font-size: 13px; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .4); white-space: nowrap; }
.onizleme-serit a { margin-left: 6px; font-weight: 700; text-decoration: underline; }
@media (max-width: 760px) { .onizleme-serit { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); font-size: 12px; white-space: normal; width: calc(100% - 32px); } }

/* ══════════ BÖLÜME GÖRE DEĞİŞEN RENKLER (js/tanitim.js → renkTakibi) ═══════
   Üst çubuk, telefonun tarayıcı çubukları (theme-color) ve alt gezinme altlarındaki bölümün rengini alır. Kaydırdıkça renk
   değişsin diye bazı bölümler tam genişlikte renklidir: yorumlar koyu bant, kataloglar açık vurgu tonu, alt bilgi koyu. */
.ust { color: var(--yazi); transition: background-color .45s ease, box-shadow .35s, color .35s, height .35s var(--egri); }
.ust.koyu-zemin { color: #fff; }
.ust.dolu { background: color-mix(in srgb, var(--bolum-renk, #fff) 84%, transparent); box-shadow: 0 1px 0 rgb(127 127 127 / .14), 0 10px 30px -20px rgb(16 19 42 / .35); }
.ust.dolu.koyu-zemin { box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
.ust .ust-telefon { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); }

.yorumlar { background: var(--gece); color: #fff; }
.yorumlar .bolum-baslik p, .yorumlar .yorum-ozet { color: rgb(255 255 255 / .7); }
.yorumlar .yorum-ozet b { color: #fff; }
.yorumlar .bolum-ust { color: color-mix(in srgb, var(--renk) 55%, white); }
.yorumlar .yorum-kart { color: var(--yazi); }
.yorumlar .bos-not { color: rgb(255 255 255 / .6); }
.yorumlar .dugme.cizgi { background: rgb(255 255 255 / .08); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .25); }
.yorumlar .dugme.cizgi:hover { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; }
.yorumlar .yildizlar svg:not(.dolu) { color: rgb(255 255 255 / .25); fill: rgb(255 255 255 / .25); }
.yorumlar .yorum-kart .yildizlar svg:not(.dolu) { color: #e5e7eb; fill: #e5e7eb; }
.kataloglar { background: var(--renk-acik); }
.alt { background: var(--gece); color: rgb(255 255 255 / .55); border-top: 0; }
.alt b { color: #fff; }
.sablon-sade .yorumlar, .sablon-sade .alt { background: #f3f4f6; color: var(--yazi); }
.sablon-sade .yorumlar .bolum-baslik p, .sablon-sade .yorumlar .yorum-ozet, .sablon-sade .alt { color: var(--yazi-2); }
.sablon-sade .yorumlar .yorum-ozet b, .sablon-sade .alt b { color: var(--yazi); }
.sablon-sade .yorumlar .dugme.cizgi { background: var(--yuzey); color: var(--yazi); box-shadow: inset 0 0 0 1.5px var(--kenar); }
.sablon-sade .ust { color: var(--yazi); }
.sablon-sade .ust.koyu-zemin { color: #fff; }

/* ══════════ TELEFON ═══════════════════════════════════════════════════════ */
.mobil-nav { display: none; }
@media (max-width: 760px) {
    /* Üst çubuk: logo + telefon; menü ve sepet alt çubukta */
    .ust { height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; gap: 10px; }
    .ust.dolu { height: calc(56px + env(safe-area-inset-top)); }
    .ust-nav, .ust-menu-dugme, .ust-sepet { display: none !important; }
    .marka { font-size: 16px; }
    .marka img, .marka-harf { width: 34px; height: 34px; border-radius: 10px; }

    /* Alt gezinme: cam, bölüme göre tonlanan, ev çubuğunun üstünde */
    .mobil-nav {
        position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45;
        display: flex; justify-content: space-around; align-items: stretch; height: 64px; padding: 6px;
        border-radius: 22px; color: var(--yazi);
        background: color-mix(in srgb, var(--bolum-renk, #fff) 82%, transparent);
        box-shadow: 0 0 0 1px rgb(127 127 127 / .16), 0 18px 40px -16px rgb(10 14 31 / .45);
        backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
        transition: background-color .45s ease, color .35s;
        animation: mn-gel .6s var(--egri) .4s backwards;
    }
    .mobil-nav.koyu-zemin { color: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 18px 40px -16px rgb(0 0 0 / .6); }
    @keyframes mn-gel { from { transform: translateY(120%); } }
    .mn-oge {
        position: relative; display: grid; place-items: center; align-content: center; gap: 3px; flex: 1; min-width: 0; padding: 0; border: 0;
        border-radius: 16px; background: none; color: inherit; font-size: 10.5px; font-weight: 650; opacity: .62; cursor: pointer;
        transition: opacity .25s, background-color .25s, transform .2s var(--egri); -webkit-tap-highlight-color: transparent;
    }
    .mn-oge:active { transform: scale(.92); }
    .mn-oge.etkin { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
    .mn-oge.etkin svg { color: var(--renk); }
    .mobil-nav.koyu-zemin .mn-oge.etkin svg { color: color-mix(in srgb, var(--renk) 55%, white); }
    /* Yalnız ETİKET kırpılır: kural bütün span'lere uygulanınca sepet ikonunun kutusu da (span.mn-sepet-ic) taşanı kesiyor,
       köşeye taşan adet rozeti yarım görünüyordu. */
    .mn-oge > span:not(.mn-sepet-ic) { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
    .mn-sepet { opacity: 1; }
    .mn-sepet-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -24px; border-radius: 16px; background: linear-gradient(135deg, var(--renk), var(--renk-koyu)); color: #fff; box-shadow: 0 10px 24px -8px var(--renk), 0 0 0 4px color-mix(in srgb, var(--bolum-renk, #fff) 82%, transparent); }
    .mn-sayi { position: absolute; z-index: 1; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff; }
    .mobil-nav-var { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .mobil-nav-var .yonetim { bottom: calc(86px + env(safe-area-inset-bottom)); right: 14px; height: 36px; padding: 0 9px; opacity: .55; }
    .mobil-nav-var .cagri { padding-bottom: 40px; }

    /* Akış */
    .kapak { min-height: 100svh; padding: calc(96px + env(safe-area-inset-top)) 0 110px; }
    .kapak-baslik { font-size: clamp(34px, 10vw, 46px); }
    .kapak-alt { font-size: 16px; }
    .kapak-istatistik { gap: 10px 28px; margin-top: 40px; }
    .kapak-istatistik b { font-size: 28px; }
    .kapak-asagi { bottom: 96px; }
    .ozellikler { margin-top: -48px; }
    .ozellik-izgara { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .ozellik-izgara::-webkit-scrollbar { display: none; }
    .ozellik { flex: 0 0 78%; scroll-snap-align: center; padding: 22px 20px; }
    .bolum { padding: 64px 0; }
    .bolum-baslik { margin-bottom: 30px; }
    .bolum-baslik p { font-size: 15.5px; }
    .vitrin-arac { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5; margin: 0 -16px 18px; padding: 10px 16px; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
    .vitrin-ara { flex: 1 1 100%; max-width: none; height: 46px; }
    .tur-cipler { margin: 0 -16px; padding: 4px 16px; width: calc(100% + 32px); }
    .one-cikan { margin-bottom: 28px; }
    .katalog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .galeri-izgara { columns: 2; column-gap: 10px; }
    .galeri-foto { margin-bottom: 10px; border-radius: 14px; }
    .yorum-akis.kayan .yorum-kart { width: 280px; }
    .cagri-kutu { padding: 28px 22px; }
    .cagri-dugmeler, .cagri-dugmeler .dugme { width: 100%; }
    .harita { min-height: 280px; }
    .alt { flex-direction: column; align-items: flex-start; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

    /* Sepet çekmecesi alttan açılan sayfa gibi */
    .cekmece { top: auto; width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); }
    .cekmece::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; border-radius: 2px; translate: -50% 0; background: rgb(127 127 127 / .35); }
    .cekmece-alt { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
    .acilir-perde { align-items: end; padding: 0; }
    .acilir-kutu { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateY(100%); }
    .gorun-kucukler { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}