/* Görsel dil: oakywood.shop (gri kart kutusu, keskin köşe, hap düğme, büyük kalın başlık + nokta).
   Kullanılabilirlik: SCY vitrin kuralları (44px dokunma, görünür odak, mobil sabit satın alma çubuğu,
   pasif "Stokta yok", sayfa yolu, WhatsApp). Tema rengi logodan: #0097B2. */
:root {
  --tema: #0097b2;          /* logonun zemin rengi */
  --tema-derin: #00748a;    /* beyaz yazı/küçük metin için AA kontrastlı ton */
  --tema-koyu: #005f71;
  --tema-acik: #e3f3f6;
  --zemin: #fafafa;
  --yuzey: #ffffff;
  --kutu: #efefef;          /* Oakywood kart grisi (ölçüldü) */
  --metin: #151a1c;
  --soluk: #5b6468;
  --cizgi: #e3e3e1;
  --golge: 0 1px 2px rgba(20, 30, 35, .06), 0 10px 30px rgba(20, 30, 35, .08);
  --yazi: "Mulish", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --baslik: "Outfit", "Mulish", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 16px/1.6 var(--yazi); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--baslik); line-height: 1.15; letter-spacing: -.01em; margin: 0; font-weight: 600; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--tema); outline-offset: 3px; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 12px; top: -60px; background: var(--metin); color: #fff; padding: 12px 18px; z-index: 100; }
.atla:focus { top: 12px; }
.kap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.kap.dar { max-width: 820px; }
.orta { text-align: center; margin: 36px 0 0; }
@media (max-width: 699px) { .kap { padding: 0 16px; } .gizle-mobil { display: none; } }

/* ---------- düğmeler (hap) ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--tema-derin); color: #fff; font-family: var(--baslik); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.dugme:hover { background: var(--tema-koyu); }
.dugme:active { transform: translateY(1px); }
.dugme svg { width: 20px; height: 20px; }
.dugme-ince { min-height: 44px; padding: 0 20px; font-size: 15px; }
.dugme-genis { width: 100%; font-size: 16px; min-height: 52px; }
.dugme-koyu { background: var(--metin); }
.dugme-koyu:hover { background: #000; }
.dugme-buyuk { text-transform: uppercase; letter-spacing: .04em; font-size: 14px; min-height: 44px; padding: 0 22px; }
.dugme-ikincil { background: transparent; color: var(--metin); box-shadow: inset 0 0 0 1.5px var(--metin); }
.dugme-ikincil:hover { background: var(--metin); color: #fff; }
.dugme[aria-disabled="true"], .dugme:disabled { background: #c9cdcf; color: #3d4447; cursor: not-allowed; transform: none; }
.ikon-dugme { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.ikon-dugme:hover { background: rgba(0, 0, 0, .05); }

/* ---------- üst: Oakywood düzeni (ölçüldü: duyuru 39px, üst satır 48px/13px, kategori satırı 48px/15px) ---------- */
.duyuru { background: var(--tema-derin); color: #fff; text-align: center; font-size: 13px; letter-spacing: .01em; }
.duyuru p { margin: 0; padding: 10px 16px; }
.duyuru .ayrac { margin: 0 8px; opacity: .7; }
@media (max-width: 699px) { .duyuru .ayrac { display: none; } }
.ust { position: sticky; top: 0; z-index: 40; background: var(--zemin); }
.ust-1 { border-bottom: 1px solid #d9d9d9; background: var(--zemin); }
.ust-1-ic { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 58px; max-width: 1320px; }
.ust-sol { display: flex; align-items: center; min-width: 0; }
.kisa { display: flex; gap: 4px; }
.kisa a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.kisa a:first-child { padding-left: 0; }
.kisa a:hover { color: var(--tema-derin); }
.logo { display: block; justify-self: center; }
.logo img { height: 44px; width: auto; }
.ust-sag { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.menu-ac, .menu-bas, .yalniz-mobil { display: none; }

.ana-menu { background: var(--zemin); border-bottom: 1px solid #d9d9d9; }
.ana-menu ul { list-style: none; margin: 0; padding: 0; }
.ana-menu > ul { display: flex; justify-content: center; align-items: center; gap: 4px; max-width: 1320px; }
.ana-menu > ul > li { position: relative; display: flex; align-items: center; }
.ana-menu > ul > li > a { display: flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ana-menu > ul > li > a:hover { color: var(--tema-derin); }
.ana-menu .ozel a svg { width: 16px; height: 16px; color: var(--tema-derin); }
.menu-ayrac { width: 1px; height: 22px; background: #d9d9d9; margin: 0 12px; }
.ana-menu > ul > li.kisa-mobil { display: none; }
@media (max-width: 1359px) { .ana-menu > ul > li > a { padding: 0 10px; } .menu-ayrac { margin: 0 6px; } }
.acilir > a::after { content: ""; width: 6px; height: 6px; margin-left: 1px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: .55; }
.alt-ac { display: none; }
.alt { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 10px !important; background: var(--yuzey); box-shadow: var(--golge); border: 1px solid var(--cizgi); opacity: 0; visibility: hidden; transform: translateY(4px); transition: .16s; z-index: 5; }
.acilir:hover .alt, .acilir:focus-within .alt { opacity: 1; visibility: visible; transform: none; }
.alt a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: 15px; }
.alt a:hover { background: var(--kutu); color: var(--tema-derin); }

@media (max-width: 1199px) {
  .ust { border-bottom: 1px solid #d9d9d9; }
  .ust-1 { border-bottom: 0; }
  .ust-1-ic { height: 60px; gap: 8px; }
  .kisa, .gizle-mobil { display: none !important; }
  .yalniz-mobil { display: inline-grid; }
  .menu-ac { display: inline-grid; margin-left: -10px; }
  .logo img { height: 42px; }
  .acilir > a::after { display: none; }
  .ana-menu { position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--yuzey); z-index: 60; overflow-y: auto; transform: translateX(-102%); transition: transform .25s ease; box-shadow: var(--golge); padding: 0 0 24px; border: 0; }
  .ana-menu.acik { transform: none; }
  .menu-bas { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--cizgi); }
  .menu-bas img { height: 42px; width: auto; }
  .ana-menu > ul { display: block; padding: 8px 16px; }
  .ana-menu > ul > li { flex-wrap: wrap; border-bottom: 1px solid var(--cizgi); }
  .ana-menu > ul > li > a { flex: 1; min-height: 54px; padding: 0; font-family: var(--baslik); font-size: 19px; font-weight: 600; }
  .ana-menu .ozel a svg { width: 18px; height: 18px; }
  .menu-ayrac { display: none; }
  .kisa-mobil { display: flex !important; border-bottom: 0 !important; }
  .ana-menu > ul > .kisa-mobil:nth-last-child(5) { margin-top: 16px; }
  .ana-menu > ul > .kisa-mobil > a { min-height: 44px; font-family: var(--yazi); font-size: 15px; color: var(--soluk); }
  .alt-ac { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 0; background: none; cursor: pointer; margin-right: -12px; }
  .alt-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
  .alt { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; display: none; padding: 0 0 10px 12px !important; }
  .acik-alt .alt { display: block; }
  .alt a { font-size: 16px; padding: 0; }
  body.menu-acik::after { content: ""; position: fixed; inset: 0; background: rgba(10, 20, 25, .45); z-index: 50; }
}

/* ---------- arama ---------- */
.ara-katman { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 25, .5); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.ara-katman[hidden] { display: none; }
.ara-kutu { width: 100%; max-width: 640px; background: var(--yuzey); box-shadow: var(--golge); overflow: hidden; }
.ara-satir { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--cizgi); }
.ara-satir input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 17px; padding: 12px 0; background: transparent; }
.ara-sonuc { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto; }
.ara-sonuc a { display: flex; gap: 12px; align-items: center; padding: 8px 10px; text-decoration: none; }
.ara-sonuc a:hover, .ara-sonuc a:focus { background: var(--kutu); }
.ara-sonuc img { width: 44px; height: 66px; object-fit: cover; background: var(--kutu); }
.ara-sonuc span { display: grid; flex: 1; min-width: 0; }
.ara-sonuc small { color: var(--soluk); }
.ara-sonuc b { white-space: nowrap; }
.ara-sonuc .bos { padding: 18px; color: var(--soluk); }

/* ---------- hero: tam genişlik ---------- */
.hero { position: relative; background: var(--kutu); }
.hero-ray { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-ray::-webkit-scrollbar { display: none; }
.hero-slayt { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3000 / 1550; max-height: min(58vh, 520px); }
.hero-slayt img { width: 100%; height: 100%; object-fit: cover; }
.hero-nokta { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 2px; }
.hero-nokta button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-nokta button::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); transition: .2s; }
.hero-nokta button[aria-selected="true"]::before { width: 24px; background: #fff; }

/* ---------- güvence bandı (Oakywood'un slogan bandı gibi) ---------- */
.guven { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.guven ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
.guven li { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px 12px; }
.guven li + li { border-left: 1px solid var(--cizgi); }
.guven svg { width: 22px; height: 22px; color: var(--tema); }
.guven div { display: grid; }
.guven strong { font-family: var(--baslik); font-size: 14px; font-weight: 600; line-height: 1.3; }
.guven span { font-size: 13px; line-height: 1.35; color: var(--soluk); }
/* mobilde tek satır, kaydırılır: iki satırlık blok ilk ekranı yiyordu */
@media (max-width: 899px) {
  .guven ul { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0; scroll-snap-type: x mandatory; }
  .guven ul::-webkit-scrollbar { display: none; }
  .guven li { flex: none; justify-content: flex-start; padding: 10px 16px; scroll-snap-align: start; }
  .guven span { display: none; }
}

/* ---------- bölüm ---------- */
.bolum { padding: 56px 0 0; }
.bolum:last-child { padding-bottom: 72px; }
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.bolum-bas h2 { font-size: clamp(19px, 1.6vw, 23px); }
.bolum-bas p { margin: 8px 0 0; color: var(--soluk); }
.bolum-arac { display: flex; align-items: center; gap: 4px; flex: none; }
.tumu { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--tema-derin); text-decoration: underline; text-underline-offset: 4px; padding: 0 8px; margin-right: 6px; }
.tumu:hover { color: var(--tema-koyu); }
.ray-geri, .ray-ileri { background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--cizgi); }
.ray-geri svg, .ray-ileri svg { width: 18px; height: 18px; }
.ray-geri:disabled, .ray-ileri:disabled { opacity: .35; cursor: default; }
@media (max-width: 699px) { .ray-geri, .ray-ileri { display: none; } .bolum { padding-top: 40px; } .bolum-bas { margin-bottom: 14px; } }

.ray { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 14px) / 4); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ray::-webkit-scrollbar { display: none; }
.ray > * { scroll-snap-align: start; }
@media (max-width: 1099px) { .ray { grid-auto-columns: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 899px) { .ray { grid-auto-columns: calc((100% - 14px) / 2.3); } }
@media (max-width: 699px) { .ray { grid-auto-columns: 44%; gap: 10px; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; } }

.izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1099px) { .izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---------- ürün kartı: gri kutu, keskin köşe ---------- */
.kart[hidden] { display: none; }
.kart { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--kutu); transition: box-shadow .2s; }
.kart:has(a:focus-visible) { outline: 3px solid var(--tema); outline-offset: 3px; }
.kart a:focus-visible { outline: 0; }
.kart-gorsel { display: block; }
.kart-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .6s; }
.kart-gorsel .ikinci { opacity: 0; }
/* Görsel modları (cek.py): 'tam' = 3:4 içerik, dolgu şeritleri kırpılır; 'sigdir' = beyaz zemin ya da
   farklı oran, kırpılmadan sığdırılır ve beyaz zemin kutu grisiyle çarpılarak kaybolur. */
/* Bütün ürün görseli kutuları 3:4. Yerleşim derle.py'de hesaplanır (yer()): */
.kart-gorsel, .kutu, .gk, .galeri-kucuk button { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--kutu); isolation: isolate; }
.kart-gorsel { aspect-ratio: 5 / 4; }
.kutu, .galeri-kucuk button { aspect-ratio: 1; }
/* 'kesik': fonu kaldırılmış ürün (kesik.py); Oakywood gibi gri zeminde boşluklu, hafif gölgeyle oturur */
img.kesik { position: absolute; inset: 14% 12% 9%; width: 76%; height: 77%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(30, 30, 30, .16)); transition: opacity .35s, transform .6s; }
.gk img.kesik { inset: 9% 10%; width: 80%; height: 82%; }
.galeri-kucuk img.kesik { inset: 8%; width: 84%; height: 84%; filter: none; }
/* 'yer': Ticimax dolgusu atılmış içerik; konum ve genişlik satır içi stilde */
img.yer { position: absolute; inset: auto; height: auto !important; max-width: none !important; } /* left/top/width/clip-path satır içi */
img.harman { mix-blend-mode: multiply; }
/* 'sigdir': beyaz fonlu ürün kırpılmadan; beyaz, kutu grisiyle çarpılarak kaybolur */
img.sigdir { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 6%; mix-blend-mode: multiply; }
.gorsel-yok { position: absolute; inset: 0; display: grid; place-items: center; }
.kart-gorsel .gorsel-yok img { position: static; width: 46%; height: auto; opacity: .35; }
.incele { position: absolute; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; justify-content: center; gap: 6px; min-height: 44px; background: rgba(255, 255, 255, .94); color: var(--tema-derin); font-family: var(--baslik); font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.incele svg { width: 16px; height: 16px; }
@media (hover: hover) and (min-width: 700px) {
  .incele { display: flex; }
  .kart:hover { box-shadow: var(--golge); }
  .kart:hover .kart-gorsel .ikinci { opacity: 1; }
  .kart:hover .kart-gorsel img { transform: scale(1.03); }
  .kart:hover .incele { opacity: 1; transform: none; }
}
.kart.tukendi .kart-gorsel img:not(.ikinci) { filter: grayscale(.6); opacity: .7; }
.rozetler { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rozet { display: inline-block; padding: 3px 7px; background: var(--tema-derin); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.2; }
.etiket { display: inline-block; padding: 3px 7px; background: #f7f7f7; color: #4a4a4a; font-size: 12px; font-weight: 600; line-height: 1.2; }
.rozet-gri { background: var(--metin); }
.kart-metin { padding: 12px 14px 16px; flex: 1; display: flex; flex-direction: column; }
.kart-ad { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kart-ad a { text-decoration: none; }
.kart-ad a::after { content: ""; position: absolute; inset: 0; } /* bütün kart tıklanır */
.fiyat { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fiyat .yeni { font-weight: 700; font-size: 14px; }
.fiyat s, .urun-fiyat s { color: #666; font-size: 12px; }
.fiyat .yok { color: var(--soluk); font-size: 15px; }
.kart-not { margin: 4px 0 0; font-size: 12px; color: var(--tema-derin); font-weight: 600; }
@media (max-width: 699px) {
  .kart-metin { padding: 10px 10px 12px; }
  .kart-ad { font-size: 14px; }
  .rozet, .etiket { padding: 2px 6px; }
  .rozetler { top: 8px; left: 8px; right: 8px; gap: 4px; }
}

/* ---------- kategori kutuları: kare görsel, ad altında ---------- */
.kutular { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.kutu-a { display: block; text-decoration: none; min-width: 0; }
.kutu { display: block; }
.kutu img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.kutu-a:hover .kutu img { transform: scale(1.04); }
.kutu img.kesik { inset: 13% 13% 11%; width: 74%; height: 76%; }
.kutu-ad { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 2px 0; }
.kutu-ad strong { font-family: var(--baslik); font-size: 15px; font-weight: 600; line-height: 1.3; }
.kutu-ad small { flex: none; font-size: 13px; color: var(--soluk); }
.kutu-a:hover strong { color: var(--tema-derin); }
@media (max-width: 1099px) { .kutular { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 28%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .kutu-a { scroll-snap-align: start; } }
@media (max-width: 699px) { .kutular { grid-auto-columns: 40%; gap: 10px; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; } .kutu-ad { display: grid; gap: 0; } .kutu-ad strong { font-size: 14px; } }

/* ---------- hikâye ve blog ---------- */
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 899px) { .uclu { grid-template-columns: minmax(0, 1fr); } }
.hikaye-kart, .yazi-kart { display: flex; flex-direction: column; background: var(--kutu); text-decoration: none; transition: box-shadow .2s; }
.hikaye-kart:hover, .yazi-kart:hover { box-shadow: var(--golge); }
.hikaye-kart img { aspect-ratio: 3000 / 1550; width: 100%; object-fit: cover; }
.hikaye-kart h3, .yazi-kart h3, .yazi-kart h2 { font-size: 18px; font-weight: 600; line-height: 1.3; padding: 18px 20px 0; }
.hikaye-kart p, .yazi-kart p { color: var(--soluk); font-size: 14px; line-height: 1.55; margin: 8px 0 0; padding: 0 20px; flex: 1; }
.hikaye-kart p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; margin-bottom: auto; }
.oku { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; margin: 6px 20px 8px; font-size: 14px; font-weight: 700; color: var(--tema-derin); }
.oku svg { width: 16px; height: 16px; transition: transform .2s; }
.hikaye-kart:hover .oku svg, .yazi-kart:hover .oku svg { transform: translateX(3px); }
.tarih { display: block; padding: 18px 20px 0; font-size: 13px; color: var(--soluk); }
.metin .tarih { padding: 0; margin: 0 0 8px; }

/* ---------- sayfa yolu ---------- */
.kirinti { padding: 12px 0 0; font-size: 14px; color: var(--soluk); }
.kirinti ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; column-gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kirinti ol::-webkit-scrollbar { display: none; }
.kirinti li { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.kirinti li:last-child { flex: 0 1 auto; min-width: 0; }
.kirinti li + li::before { content: "›"; color: #9aa2a5; }
.kirinti a { display: inline-flex; align-items: center; min-height: 44px; color: var(--soluk); text-decoration: none; }
.kirinti a:hover { color: var(--tema-derin); text-decoration: underline; }
.kirinti [aria-current] { color: var(--metin); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; display: block; }

/* ---------- kategori sayfası ---------- */
.sayfa-bas { padding: 8px 0 8px; }
.sayfa-bas h1 { font-size: clamp(23px, 2.3vw, 30px); }
.sayfa-bas p { color: var(--soluk); margin: 8px 0 0; }
.cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 0 4px; }
.cipler::-webkit-scrollbar { display: none; }
.cipler a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--yuzey); box-shadow: inset 0 0 0 1px var(--cizgi); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.cipler a:hover { box-shadow: inset 0 0 0 1.5px var(--metin); }
.cipler a[aria-current] { background: var(--metin); color: #fff; box-shadow: none; }
.arac-cubugu { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.arac-cubugu label { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.arac-cubugu select { font-size: 16px; min-height: 44px; padding: 0 12px; border: 1px solid var(--cizgi); background: var(--yuzey); cursor: pointer; }
.arac-cubugu input { width: 22px; height: 22px; accent-color: var(--tema-derin); }
.kap > .izgara { padding-bottom: 8px; }
.daha { text-align: center; padding: 36px 0 88px; }
.daha p { color: var(--soluk); font-size: 15px; margin: 0 0 14px; }
.daha[hidden] { display: none; }

/* ---------- ürün sayfası ---------- */
.urun { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; padding: 8px 0 16px; align-items: start; }
.galeri-ana { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gk:only-child { grid-column: 1 / -1; }
.galeri-kucuk { display: none; }
.urun-bilgi { position: sticky; top: 132px; }
@media (max-width: 899px) {
  .urun { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .urun-bilgi { position: static; }
  .galeri-ana { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; background: var(--kutu); }
  .galeri-ana::-webkit-scrollbar { display: none; }
  .gk { flex: 0 0 100%; scroll-snap-align: start; }
  .galeri-kucuk { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; }
  .galeri-kucuk button { flex: none; width: 52px; padding: 0; border: 0; cursor: pointer; }
  .galeri-kucuk button img { opacity: .6; }
  .galeri-kucuk button img.sigdir { padding: 4%; }
  .galeri-kucuk button[aria-selected="true"] { outline: 2px solid var(--tema-derin); outline-offset: 0; }
  .galeri-kucuk button[aria-selected="true"] img { opacity: 1; }
}
.urun-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.urun-ust .etiket { background: var(--kutu); }
.urun-kat { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: var(--tema-derin); font-weight: 700; text-decoration: none; }
.urun-kat:hover { text-decoration: underline; }
.urun-bilgi h1 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; margin: 8px 0 12px; overflow-wrap: anywhere; }
.urun-fiyat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.urun-fiyat .yeni { font-family: var(--baslik); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.urun-fiyat s { font-size: 16px; }
.kdv { color: var(--soluk); font-size: 15px; margin: 6px 0 0; }
.tikler { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; font-size: 14px; }
.tikler li { display: flex; gap: 8px; align-items: flex-start; }
.tikler svg { width: 18px; height: 18px; margin-top: 3px; color: var(--tema-derin); stroke-width: 2.2; }
@media (max-width: 420px) { .tikler { grid-template-columns: minmax(0, 1fr); } }
.stok { margin: 0 0 14px; font-size: 15px; color: #1e7a3c; font-weight: 700; }
.stok::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: currentColor; margin-right: 8px; vertical-align: 2px; }
.stok-yok { color: #a8261d; }
.eylem { display: grid; gap: 10px; }
.not { font-size: 14px; color: var(--soluk); text-align: center; margin: 2px 0 0; }
.ozellik { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 24px; margin: 28px 0 0; font-size: 15px; border-top: 1px solid var(--cizgi); }
.ozellik dt, .ozellik dd { padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.ozellik dt { color: var(--soluk); }
.ozellik dd { margin: 0; overflow-wrap: anywhere; }
.ozellik a { display: inline-block; padding: 2px 0; color: var(--tema-derin); font-weight: 600; }

/* mobil sabit satın alma çubuğu (SCY kuralı) */
.alt-cubuk { display: none; }
@media (max-width: 899px) {
  .urun-sayfasi { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--cizgi); box-shadow: 0 -6px 20px rgba(20, 30, 35, .06); }
  .alt-cubuk div { min-width: 0; flex: 1; display: grid; }
  .alt-cubuk small { font-size: 13px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .alt-cubuk strong { font-family: var(--baslik); font-size: 19px; line-height: 1.2; }
  .alt-cubuk .dugme { flex: none; min-height: 48px; padding: 0 22px; }
}

/* ---------- WhatsApp ---------- */
.wa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 999px; background: var(--tema-derin); color: #fff; box-shadow: var(--golge); transition: background .15s, transform .15s; }
.wa:hover { background: var(--tema-koyu); transform: translateY(-2px); }
.wa svg { width: 24px; height: 24px; }
@media (max-width: 899px) { .urun-sayfasi .wa { bottom: calc(88px + env(safe-area-inset-bottom)); } }

/* ---------- metin sayfaları ---------- */
.metin { background: var(--yuzey); padding: clamp(24px, 5vw, 56px); margin: 12px 0 0; overflow-wrap: anywhere; }
.metin h1 { font-size: clamp(23px, 2.3vw, 30px); margin-bottom: 18px; }
.metin h2 { font-size: 21px; font-weight: 600; margin: 32px 0 10px; }
.metin h3 { font-size: 20px; font-weight: 600; margin: 24px 0 8px; }
.metin p, .metin li { color: #333b3e; }
.metin a { color: var(--tema-derin); font-weight: 600; }
.metin table { display: block; overflow-x: auto; border-collapse: collapse; }
.metin td, .metin th { border: 1px solid var(--cizgi); padding: 6px 10px; }
.yazi-gorsel { margin: 0 0 24px; width: 100%; }
.kap.dar > .orta { padding-bottom: 88px; }
.bos-sayfa { text-align: center; padding: 96px 16px; }
.bos-sayfa h1 { font-size: clamp(28px, 4vw, 42px); }
.bos-sayfa .dugme { margin: 6px; }

/* ---------- iletişim ---------- */
.iletisim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; padding: 20px 0 0; align-items: start; }
.iletisim-kanal { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iletisim-kanal a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; background: var(--kutu); text-decoration: none; transition: box-shadow .2s; }
.iletisim-kanal a:hover { box-shadow: var(--golge); }
.iletisim-kanal svg { color: var(--tema-derin); }
.iletisim-kanal span { display: grid; }
.iletisim-kanal strong { font-family: var(--baslik); font-weight: 600; font-size: 15px; }
.iletisim-kanal small { color: var(--soluk); font-size: 14px; }
.konum { background: var(--kutu); padding: 18px; }
.konum h2 { font-size: 18px; font-weight: 600; }
.konum address { font-style: normal; color: var(--soluk); font-size: 14px; margin: 6px 0 14px; }
.harita { aspect-ratio: 16 / 10; background: #e4e6e6; display: grid; place-content: center; justify-items: center; gap: 8px; }
.harita small { color: var(--soluk); font-size: 13px; }
.harita.yuklu { display: block; }
.harita iframe { width: 100%; height: 100%; border: 0; display: block; }
.konum .tumu { margin: 8px 0 0; padding: 0; }
.sss { max-width: 820px; padding: 48px 0 72px; }
.sss h2 { font-size: clamp(19px, 1.6vw, 23px); margin-bottom: 14px; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 10px 0; cursor: pointer; font-weight: 700; list-style: none; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--tema-derin); flex: none; }
.sss details[open] summary::after { content: "\2212"; }
.sss details p { margin: 0 0 16px; color: #333b3e; font-size: 15px; }
.sss-bag { margin: 18px 0 0; font-size: 14px; }
.sss-bag a { color: var(--tema-derin); font-weight: 600; }
@media (max-width: 899px) { .iletisim { grid-template-columns: minmax(0, 1fr); } .sss { padding-top: 36px; } }

/* ---------- alt bilgi ---------- */
.alt-bilgi { background: var(--tema-derin); color: #fff; }
.alt-ic { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 52px; padding-bottom: 40px; }
.alt-marka img { width: 150px; margin-bottom: 16px; }
.alt-marka p { margin: 0; max-width: 36ch; font-size: 15px; opacity: .92; }
.alt-sosyal { display: flex; gap: 8px; margin-top: 16px; }
.alt-sosyal a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.alt-sosyal a:hover { background: rgba(255, 255, 255, .12); }
.alt-bilgi h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; }
.alt-bilgi li a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; text-decoration: none; opacity: .92; }
.alt-bilgi li a:hover { opacity: 1; text-decoration: underline; }
.alt-son { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 18px; padding-bottom: 24px; font-size: 14px; opacity: .9; }
.alt-son p { margin: 4px 0; }
@media (max-width: 899px) { .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alt-marka { grid-column: 1 / -1; } }
@media (max-width: 420px) { .alt-ic { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- sepet ---------- */
.sepet-ac { position: relative; }
.sepet-sayi { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--tema-derin); color: #fff; font: 700 11px/18px var(--yazi); text-align: center; }
.sepet-sayi[hidden] { display: none; }
.sepet-katman { position: fixed; inset: 0; z-index: 90; background: rgba(10, 20, 25, .5); display: flex; justify-content: flex-end; }
.sepet-katman[hidden] { display: none; }
.sepet { width: min(420px, 100%); height: 100%; background: var(--yuzey); box-shadow: var(--golge); display: flex; flex-direction: column; }
.sepet-bas { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--cizgi); }
.sepet-bas h2 { font-size: 20px; }
.sepet-liste { list-style: none; margin: 0; padding: 8px 22px; overflow-y: auto; flex: 1; }
.sepet-liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.sepet-liste img { width: 64px; height: 80px; object-fit: cover; background: var(--kutu); }
.sepet-liste li > div { display: grid; gap: 4px; font-size: 15px; }
.sepet-liste li > div > a { text-decoration: none; font-weight: 600; line-height: 1.35; }
.sepet-sil { border: 0; background: none; color: var(--soluk); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px 0; min-height: 44px; }
.sepet-bos { padding: 28px 22px; color: var(--soluk); margin: 0; flex: 1; }
.sepet-bos[hidden], .sepet-alt[hidden] { display: none; }
.sepet-alt { border-top: 1px solid var(--cizgi); padding: 16px 22px 22px; display: grid; gap: 10px; }
.sepet-kargo { margin: 0; font-size: 14px; color: var(--tema-derin); font-weight: 600; }
.sepet-toplam { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 16px; }
.sepet-toplam strong { font-family: var(--baslik); font-size: 20px; }
.adet { display: inline-flex; align-items: center; border: 1.5px solid var(--cizgi); border-radius: 999px; width: max-content; }
.adet input, .adet output { width: 44px; text-align: center; border: 0; background: transparent; font-weight: 700; -moz-appearance: textfield; }
.adet input::-webkit-inner-spin-button, .adet input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.adet .ikon-dugme { font-size: 20px; line-height: 1; }
.adet .ikon-dugme:disabled { opacity: .35; cursor: not-allowed; }
.adet-kucuk .ikon-dugme { width: 36px; height: 36px; }
.adet-kucuk output { width: 28px; }