/* PetCity: şehir dili (tabela, kapı numarası, bilboard) + sakin çerçeve, renkli ürünler. */

/* Marka yazı tipi: Clash Display (brand/fonts, ticari kullanım serbest) */
@font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-Semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../assets/fonts/ClashDisplay-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
/* Apfel Grotezk (Collletttivo, SIL OFL 1.1, brand/fonts/apfel-grotezk-main): yalnızca hero başlığı ve paragrafı */
@font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2"), url("../assets/fonts/ApfelGrotezk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Apfel Grotezk"; src: url("../assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2"), url("../assets/fonts/ApfelGrotezk-Fett.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Renkler */
  --tabela: #1E3F8F;      /* İstanbul sokak tabelası mavisi: yalnızca kapı numaraları ve sokak tabelası */
  --tabela-koyu: #17327A;
  --murekkep: #01225B;    /* metin: logodaki "Pet City" laciverti */
  --murekkep-2: #4A5677;  /* ikincil metin */
  --kaldirim: #F5F1E8;    /* sayfa zemini: sıcak taş rengi (eskiden soğuk gri-mavi) */
  --kaldirim-cizgi: #E2DACB;
  --gok: #CBE6F6;         /* hero gökyüzü (fotoğrafın duvarı) */
  --beyaz: #FAF8F3;        /* kırık beyaz: saf beyaz yerine; kartlar, tabelalar, form, açık düğmeler, koyu zemindeki yazı */
  --wa: #1F8F4E;

  /* Logo renkleri (brand/logo/petcity-logo.png'den ölçüldü). Sitenin ana renkleri bunlar:
     düğmeler, süzgeç tabelaları, kartlar, bölüm zeminleri, başlık çizgileri */
  --t-pembe: #E02554;     /* ahududu: üstünde kırık beyaz yazı */
  --t-turuncu: #F59916;   /* aşağıdakilerin üstünde lacivert yazı */
  --t-sari: #FAC306;
  --t-yesil: #6CB42E;
  --t-turkuaz: #02B4CA;
  --t-mavi: #139FF1;
  --pembe-dolgu: #D6214F; /* üstünde yazı olan ahududu dolgular: kırık beyaz yazıyla 4.7:1 (logodaki #E02554 4.3:1 kalıyor) */
  --pembe-yazi: #C21A4B;  /* bağlantı ve vurgu yazısı: kırık beyazda 5:1 karşıtlık */

  /* Degradeler */
  --grad-sehir: linear-gradient(90deg, var(--t-mavi), var(--t-pembe) 25%, var(--t-sari) 50%, var(--t-yesil) 75%, var(--t-turuncu)); /* logodaki bina sırası */
  --grad-gunes: linear-gradient(110deg, var(--t-sari) 0%, var(--t-turuncu) 50%, #EE7A0A 100%);    /* Trendyol düğmeleri */
  --grad-ahududu: linear-gradient(110deg, var(--pembe-dolgu) 0%, #C41B4C 50%, #AE1547 100%);       /* birincil düğmeler */

  /* Yazı */
  /* Clash Display: başlıklar, tabelalar, menü, düğmeler. Barlow: okunan metin ve formlar */
  --f-display: "Clash Display", "Barlow", system-ui, sans-serif;
  --f-body: "Barlow", system-ui, sans-serif;
  --f-hero: "Apfel Grotezk", "Barlow", system-ui, sans-serif; /* hero başlığı ve paragrafı */
  --s-0: 0.8125rem;  /* 13 */
  --s-1: 0.9375rem;  /* 15 */
  --s-2: 1.0625rem;  /* 17 gövde */
  --s-3: 1.3125rem;  /* 21 */
  --s-4: 1.625rem;   /* 26 */
  --s-5: 2.0625rem;  /* 33 */
  --s-6: clamp(2.5rem, 5vw, 3.875rem);  /* 40–62 bölüm başlığı */

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; } /* sabit üst bar bölüm başlıklarını örtmesin */
body {
  margin: 0;
  background: var(--kaldirim);
  color: var(--murekkep);
  font-family: var(--f-body);
  font-size: var(--s-2);
  line-height: 1.55;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
/* yalnızca ekran okuyucular için yazı (ör. "Listeye ekle" düğmesindeki ürün adı) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
a { color: var(--pembe-yazi); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--t-turuncu); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--pembe-dolgu); color: var(--beyaz); padding: 10px 14px; border-radius: var(--radius);
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 2px solid transparent; border-radius: var(--radius);
  font: 600 1rem/1 var(--f-display); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .25s, translate .25s cubic-bezier(.2, .8, .2, 1), background-position .45s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .ext { width: 12px; height: 12px; }
/* Düğmeler logo renklerinde. Üstüne gelince hafifçe kalkar ve degrade kayar.
   (translate kullanılır, transform değil: konumu transform'la verilmiş düğmeler bozulmaz)
   birincil: ahududu degrade, kırık beyaz yazı (en açık noktada 4.7:1) */
.btn--primary {
  background: var(--grad-ahududu); background-size: 200% 100%; color: var(--beyaz);
  box-shadow: 0 10px 22px -12px rgb(224 37 84 / .8);
}
.btn--primary:hover { background-position: 100% 0; translate: 0 -2px; box-shadow: 0 16px 28px -14px rgb(224 37 84 / .9); }
/* Trendyol'a giden düğmeler: güneş degradesi (sarı → turuncu), lacivert yazı */
.btn--store {
  background: var(--grad-gunes); background-size: 200% 100%; color: var(--murekkep);
  box-shadow: 0 10px 22px -12px rgb(245 153 22 / .85);
}
.btn--store:hover { background-position: 100% 0; translate: 0 -2px; box-shadow: 0 16px 28px -14px rgb(238 122 10 / .9); }
/* ikincil: kırık beyaz zemin, logodaki bina renklerinde degrade çerçeve */
.btn--light, .btn--ghost {
  border: 2.5px solid transparent;
  background: linear-gradient(var(--beyaz), var(--beyaz)) padding-box, var(--grad-sehir) border-box;
  color: var(--murekkep);
}
.btn--light:hover, .btn--ghost:hover {
  background: linear-gradient(#FFF3DA, #FFF3DA) padding-box, var(--grad-sehir) border-box;
  translate: 0 -2px; box-shadow: 0 12px 24px -16px rgb(1 34 91 / .45);
}
.btn--wa { background: var(--wa); color: var(--beyaz); }
.btn--wa:hover { background: #18773F; translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { translate: none !important; } .site-header, .logo__img, .site-nav .logo::before { transition: none; } }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex: none; border-radius: 12px; }
.logo__img { height: 92px; width: auto; transition: height .3s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Üst bar: logo tam ortada, bağlantılar iki yanında ---------- */
.site-header {
  /* Sabit üst bar (bilgisayar ve telefon). Sayfanın en üstünde hero fotoğrafının üstünde saydamdır;
     sayfa kaydırılınca (.is-stuck, js/app.js) buzlu lacivert zemin alır, gölgelenir ve logo küçülür.
     Katman sırası: içerik < üst bar (40) < atla bağlantısı (50) < mobil menü (80) < galeri (90). */
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; align-items: center;
  padding: 12px var(--gutter);
  background: rgb(1 34 91 / 0);
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s cubic-bezier(.2, .8, .2, 1);
}
.site-header.is-stuck {
  padding-block: 6px;
  background: rgb(1 34 91 / .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 28px -18px rgb(0 0 0 / .65), inset 0 -1px 0 rgb(250 248 243 / .08);
}
.site-header.is-stuck .logo__img { height: 60px; }
.site-nav { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 44px; }
.site-nav__side { display: flex; gap: 32px; }
.site-nav__side--left { grid-column: 1; justify-content: flex-end; }
.site-nav__side--right { grid-column: 3; }
/* yan bağlantılar gizlense de logo orta sütunda kalır */
.site-nav .logo { grid-column: 2; grid-row: 1; }
.site-nav__side a {
  color: var(--beyaz); font: 500 1rem/1 var(--f-display); letter-spacing: .01em;
  text-shadow: 0 1px 10px rgb(0 0 0 / .4);
  text-decoration: underline 3px transparent; text-underline-offset: 7px;
  transition: text-decoration-color .2s;
}
/* logo kararmış fotoğrafın üstünde: arkasında yumuşak bir ışık, "Pet City" laciverti okunur kalır */
.site-nav .logo { position: relative; isolation: isolate; }
.site-nav .logo::before {
  content: ""; position: absolute; inset: -40px -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(250 248 243 / .82) 25%, rgb(250 248 243 / .4) 55%, rgb(250 248 243 / .12) 78%, rgb(250 248 243 / 0));
  filter: blur(4px);
  transition: opacity .3s ease;
}
/* lacivert barda logonun beyaz kenarı yeter: arkadaki ışık söner */
.site-header.is-stuck .logo::before { opacity: 0; }
/* her bağlantının altı çizgisi logodan bir renk */
.site-nav__side--left a:nth-child(1) { --c: var(--t-pembe); }
.site-nav__side--left a:nth-child(2) { --c: var(--t-turuncu); }
.site-nav__side--right a:nth-child(1) { --c: var(--t-yesil); }
.site-nav__side--right a:nth-child(2) { --c: var(--t-mavi); }
.site-nav__side a:hover, .site-nav__side a:focus-visible { text-decoration-color: var(--c, var(--t-pembe)); }
.site-header__store {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  min-height: 42px; padding: 0 16px; font-size: var(--s-1);
}

/* Menü düğmesi: yan bağlantılar gizlenince (≤1180px) solda görünür, Trendyol düğmesinin eşi.
   Üç çizgi logodan üç renk. Buzlu koyu cam: kararmış hero fotoğrafının üstünde okunur. */
.menu-btn {
  display: none;
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; padding: 0; place-items: center;
  border: 1px solid rgb(250 248 243 / .28); border-radius: 12px;
  background: rgb(4 10 28 / .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; transition: background-color .15s;
}
.menu-btn:hover { background: rgb(4 10 28 / .55); }
.menu-btn__bars { display: grid; gap: 5px; width: 22px; justify-items: start; }
.menu-btn__bars span { display: block; width: 100%; height: 3px; border-radius: 2px; }
.menu-btn__bars span:nth-child(1) { background: var(--t-pembe); }
.menu-btn__bars span:nth-child(2) { background: var(--t-sari); width: 72%; }
.menu-btn__bars span:nth-child(3) { background: var(--t-mavi); }
@media (max-width: 1180px) { .menu-btn { display: grid; } }

/* Tam ekran mobil menü: lacivert zemin, logo renklerinde ışıklar (Toptan/İletişim bloğuyla aynı dil).
   Büyük Clash Display bağlantılar, her birinin önünde logodan bir renk. Altta Trendyol ve telefon. */
.mobile-menu {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column;
  padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--beyaz);
  background:
    radial-gradient(520px 420px at 0% 0%, rgb(224 37 84 / .5), transparent 65%),
    radial-gradient(480px 420px at 100% 32%, rgb(2 180 202 / .4), transparent 65%),
    radial-gradient(540px 440px at 15% 100%, rgb(245 153 22 / .38), transparent 65%),
    var(--murekkep);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.mobile-menu__logo { position: relative; isolation: isolate; display: inline-flex; }
.mobile-menu__logo img { height: 54px; width: auto; }
.mobile-menu__logo::before {
  content: ""; position: absolute; inset: -26px -54px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(250 248 243 / .85) 25%, rgb(250 248 243 / .4) 55%, rgb(250 248 243 / 0));
  filter: blur(4px);
}
.mobile-menu__close {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgb(250 248 243 / .28); border-radius: 12px;
  background: rgb(255 255 255 / .1); color: var(--beyaz); cursor: pointer;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__nav { display: grid; margin-top: clamp(20px, 5vh, 48px); }
.mobile-menu__nav a {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(10px, 1.8vh, 16px) 0;
  border-bottom: 1px solid rgb(250 248 243 / .12);
  color: var(--beyaz); text-decoration: none;
  font: 700 clamp(1.875rem, 8.5vw, 2.75rem)/1.05 var(--f-display); letter-spacing: -0.02em;
}
.mobile-menu__nav a::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 4px;
  background: var(--c); box-shadow: 0 0 18px var(--c);
}
.mobile-menu__nav a::after {
  content: "→"; margin-left: auto; font-weight: 500; font-size: .7em; opacity: .45;
  transition: transform .2s, opacity .2s;
}
.mobile-menu__nav a:hover::after, .mobile-menu__nav a:focus-visible::after { opacity: 1; transform: translateX(4px); }
.mobile-menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 18px; }
.mobile-menu__foot .btn { min-height: 58px; font-size: 1.125rem; border-radius: 10px; }
.mobile-menu__contact { margin: 0; color: rgb(250 248 243 / .75); font-size: var(--s-1); line-height: 1.75; }
.mobile-menu__contact a { color: var(--t-sari); font-weight: 600; }
/* açılış: zemin belirir, bağlantılar sırayla yükselir */
.mobile-menu.is-open { animation: menu-in .3s ease-out; }
.mobile-menu.is-open .mobile-menu__nav a { animation: menu-link .55s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(60ms + var(--i, 0) * 55ms); }
.mobile-menu.is-open .mobile-menu__foot { animation: menu-link .55s cubic-bezier(.2, .8, .2, 1) .35s backwards; }
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-link { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open, .mobile-menu.is-open .mobile-menu__nav a, .mobile-menu.is-open .mobile-menu__foot { animation: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 100svh, 1080px);
  background: var(--gok);
  isolation: isolate;
  overflow: hidden;
  /* yazı bloğu ekranın dikey ortasında */
  display: flex; align-items: center;
}
/* Tam ekran fotoğraf: soldaki gök mavisi duvar başlığa yer bırakır */
.hero__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  /* %30: dar ekranlarda soldan az kırpılır, oyuncaklar yazının sağında kalır */
  object-fit: cover; object-position: 30% 50%;
}
/* siyah filtre: fotoğraf çok parlaktı. Soldan (yazının olduğu yer) koyu, sağa doğru açılır,
   sağdaki hayvanlar yine de en az %18 kararır. Üstte menü için ince bir koyu şerit.
   Yazılar bu yüzden kırık beyaz. Karşıtlık: paragrafın sağ ucunda bile 5.5:1, menüde 6.5:1. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(4 10 28 / .5) 0%, rgb(4 10 28 / 0) 26%),
    linear-gradient(90deg, rgb(4 10 28 / .75) 0%, rgb(4 10 28 / .56) 34%, rgb(4 10 28 / .26) 62%, rgb(4 10 28 / .18) 100%);
}
.hero__copy {
  position: relative; z-index: 2;
  /* üstte ve altta üst bar kadar (116px) boşluk: blok tam ortada kalır, logoya hiç değmez */
  padding: 116px var(--gutter);
  /* alçak ekranlarda (1280×720 dizüstü) büyük başlıkla blok sığsın diye alt boşluk ekran yüksekliğiyle küçülür */
  padding-bottom: clamp(56px, 12vh, 116px);
  max-width: calc(min(48vw, 700px) + var(--gutter));
}
.hero__title {
  font: 700 clamp(3.25rem, 6.4vw, 6.875rem)/0.98 var(--f-hero); /* 1440 px'te 92px, en çok 110px: "Minik dostların" 700px'lik sütuna sığar */
  letter-spacing: -0.025em;
  /* Apfel Grotezk Clash'ten %13 dar: başlık tek satıra sığıyordu. "şehri" eskisi gibi ikinci satırda kalsın */
  max-width: 7em;
  color: var(--beyaz);
  text-shadow: 0 2px 26px rgb(0 0 0 / .3);
}
/* paragraf duvar/zemin üstünde kalsın, sol öndeki oyuncaklara taşmasın */
.hero__lede { margin-top: 22px; max-width: min(26em, 30vw); font-family: var(--f-hero); font-size: clamp(var(--s-3), 1.65vw, 1.875rem); line-height: 1.45; color: rgb(250 248 243 / .92); text-shadow: 0 1px 14px rgb(0 0 0 / .35); }
/* Hero düğmeleri: kutu ve çerçeve yok, yan yana iki büyük bağlantı. Altlarında fırça darbesi gibi
   dokulu bir çizgi var (assets/brand/brush-underline.png maske olarak, rengi arka plandan gelir):
   "Ürünleri incele" logodaki ahududu, "Toptan teklif al" logodaki bina renkleri. Üstüne gelince
   çizgi kalınlaşıp yazının altını boyar. Dokunma alanı en az 52px. */
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  /* ara geniş ekranda 34–44px: "Toptan teklif al" fotoğraftaki kaplumbağaya (genişliğin %30'u) değmesin */
  gap: 14px clamp(24px, 2.4vw, 44px); margin-top: clamp(28px, 3vw, 40px);
}
.hero__actions .btn {
  position: relative; isolation: isolate;
  min-height: 52px; padding: 8px 2px 17px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--beyaz);
  font: 600 clamp(1.25rem, 1.6vw, 1.75rem)/1.1 var(--f-display); letter-spacing: .01em;
  text-shadow: 0 1px 14px rgb(0 0 0 / .45);
}
.hero__actions .btn::after {
  content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; bottom: 2px; height: 15px;
  background: var(--cizgi, var(--t-pembe));
  -webkit-mask: url("../assets/brand/brush-underline.png") center / 100% 100% no-repeat;
  mask: url("../assets/brand/brush-underline.png") center / 100% 100% no-repeat;
  transform-origin: 0 50%;
  transition: height .25s cubic-bezier(.2, .8, .2, 1);
}
.hero__actions .btn--light { --cizgi: var(--grad-sehir); }
.hero__actions .btn:hover, .hero__actions .btn:focus-visible { background: none; box-shadow: none; translate: 0 -2px; }
.hero__actions .btn:hover::after, .hero__actions .btn:focus-visible::after { height: 24px; }

/* hero giriş hareketi (js/motion.js): başlık harf harf yaylanarak yükselir, paragraf bulanıktan
   netleşir, düğmeler sırayla çıkar. <html> üstündeki hero-anim sınıfını head'deki betik ekler,
   .is-in yazı tipi yüklenince gelir. Geçiş değil animasyon: düğmelerin hover geçişleri bozulmaz. */
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .char { display: inline-block; }
.hero-anim .hero__title, .hero-anim .hero__lede, .hero-anim .hero__actions .btn { opacity: 0; }
/* güvenlik: JS hiç çalışmazsa yazı 3 sn sonra yine görünür */
.hero-anim .hero__copy:not(.is-in) > *, .hero-anim .hero__copy:not(.is-in) .btn { animation: hero-failsafe 0s linear 3s forwards; }
@keyframes hero-failsafe { to { opacity: 1; } }
.hero-anim .is-in .hero__title { opacity: 1; }
.hero-anim .is-in .hero__title .char {
  animation: hero-rise .85s cubic-bezier(.2, .9, .3, 1.3) both;
  animation-delay: calc(var(--i) * 34ms);
}
.hero-anim .is-in .hero__lede {
  animation: hero-focus .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--n, 20) * 34ms + 120ms);
}
.hero-anim .is-in .hero__actions .btn {
  animation: hero-pop .7s cubic-bezier(.2, .9, .3, 1.4) both;
  animation-delay: calc(var(--n, 20) * 34ms + 380ms + var(--b, 0) * 110ms);
}
.hero-anim .is-in .hero__actions .btn::after {
  animation: bar-draw .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--n, 20) * 34ms + 620ms + var(--b, 0) * 110ms);
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(.6em) rotate(8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-focus {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes hero-pop {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.hero__title .char { transform-origin: 50% 100%; }
/* başlığın altında logodaki bina renklerinde çizgi; harfler inince soldan sağa çizilir */
.hero__title::after {
  content: ""; display: block; width: clamp(84px, 9vw, 150px); height: 8px; margin-top: 20px; border-radius: 4px;
  background: var(--grad-sehir); transform-origin: 0 50%;
}
.hero-anim .hero__title::after { transform: scaleX(0); }
.hero-anim .is-in .hero__title::after {
  animation: bar-draw .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--n, 20) * 34ms + 40ms);
}
@keyframes bar-draw { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- Bölümler ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }

/* Bölüm zeminleri: sıcak taş zemine logo renklerinden yumuşak ışık lekeleri (yazının
   arkasında çok açık kalır, okunurluk değişmez) */
.gallery {
  background:
    radial-gradient(42% 46% at 0% 0%, rgb(250 195 6 / .24), transparent 70%),
    radial-gradient(38% 42% at 100% 6%, rgb(224 37 84 / .14), transparent 70%),
    radial-gradient(34% 26% at 10% 70%, rgb(2 180 202 / .14), transparent 70%),
    var(--kaldirim);
}
/* Ürünler: açık zemin burada kesilir. Bölüm kendi güneş sarısı şeridinde durur; üst kenarı
   alt bilgideki gibi bir şehir silüeti, Evde PetCity'nin taş zemininin üstüne yükselir. */
.products {
  --bant: #FFEFC2;
  position: relative;
  background:
    radial-gradient(38% 16% at 100% 14%, rgb(245 153 22 / .16), transparent 70%),
    radial-gradient(36% 18% at 0% 52%, rgb(224 37 84 / .07), transparent 70%),
    radial-gradient(44% 20% at 100% 92%, rgb(108 180 46 / .10), transparent 70%),
    linear-gradient(180deg, var(--bant) 0%, #FFE6B3 100%);
}
.products::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(28px, 4vw, 52px);
  background: var(--bant);
  clip-path: polygon(0 40%, 6% 40%, 6% 0, 12% 0, 12% 55%, 20% 55%, 20% 20%, 27% 20%, 27% 60%, 33% 60%, 33% 10%, 40% 10%, 40% 45%, 47% 45%, 47% 0, 53% 0, 53% 50%, 60% 50%, 60% 25%, 67% 25%, 67% 60%, 74% 60%, 74% 5%, 80% 5%, 80% 40%, 87% 40%, 87% 15%, 94% 15%, 94% 50%, 100% 50%, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Bölüm başlıklarının altında logodaki bina renklerinde kısa bir çizgi */
.section-title::after {
  content: ""; display: block; width: 76px; height: 6px; margin-top: 16px; border-radius: 3px;
  background: var(--grad-sehir); transform-origin: 0 50%;
}
.gallery__head .section-title::after { margin-inline: auto; width: 96px; transform-origin: 50% 50%; }
/* başlık hareketi varsa çizgi harflerden sonra soldan sağa çizilir */
.head-anim .section-title::after { transform: scaleX(0); }
.head-anim.is-in .section-title::after {
  transform: none;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--n, 12) * 38ms + 60ms);
}
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-title { font: 700 clamp(2.125rem, 4vw, 3.25rem)/1.02 var(--f-display); letter-spacing: -0.02em; }
.section-note { max-width: 60ch; margin-top: 14px; color: var(--murekkep-2); }

/* ---------- Kampanyalar: parkta bilboardlar ---------- */
/* Katmanlar: arkada boş park fotoğrafı, ortada bilboardlar, önde kedi ve köpek kesimleri.
   Hayvanlar ayrı resim olduğu için bilboardların önünde durur ve sonra canlandırılabilir. */
.campaigns { position: relative; isolation: isolate; overflow: hidden; background: #6E9A48; }
.campaigns__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 55%;
}
/* bilboardlar sayfanın geri kalanından daha geniş bir kapta durur: daha büyük afişler */
.campaigns .wrap { max-width: 1520px; }
/* siyah filtre: park fotoğrafı tek başına çok parlak. Üstte (güneşli ağaçlar) biraz daha koyu.
   Yalnızca fotoğrafı koyulaştırır: bilboardlar, hayvanlar ve yazılar bu katmanın üstünde. */
.campaigns::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .36) 45%, rgb(0 0 0 / .3) 100%);
}
/* koyu fotoğrafın üstünde başlık ve not beyaz */
.campaigns .section-title { color: var(--beyaz); text-shadow: 0 2px 24px rgb(0 0 0 / .35); }
.campaigns .section-note { color: rgb(250 248 243 / .9); text-shadow: 0 1px 12px rgb(0 0 0 / .45); }
.billboards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3.5vw, 56px); }
/* container: kedi ve köpeğin yeri ve boyu bilboardın genişliğine (cqw) bağlı, her ekranda aynı duruş */
.billboard { margin: 0; display: flex; flex-direction: column; position: relative; container-type: inline-size; }
.billboard__face {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border: 10px solid var(--murekkep);
  border-top-width: 16px;
  border-radius: 4px;
  background: var(--beyaz);
  text-decoration: none; color: inherit;
}
.billboard__face::before {
  /* üst kenardaki renk şeridi: logodaki bina renklerinden biri */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 1;
  background: var(--accent, var(--t-turuncu));
}
.billboard__face img { width: 100%; height: 100%; object-fit: cover; }
.billboard__legs { display: flex; justify-content: space-around; height: 56px; padding-inline: 18%; }
.billboard__legs span { width: 12px; background: var(--murekkep); }
/* açıklama: ayakların dibinde beyaz bir tabela, çimin üstünde okunur */
.billboard figcaption {
  position: relative; z-index: 1;
  padding: 11px 16px; border-radius: 4px;
  background: rgb(250 248 243 / .94);
  box-shadow: 0 6px 18px -8px rgb(22 34 79 / .45);
  font-weight: 600; line-height: 1.35;
}

/* Kedi ve köpek: yalnızca iki bilboard yan yana ve iki yanda yer varken görünür.
   Ölçüler kesimlerden: kedinin pençe ucu resmin %99.4 / %8.4 noktasında, ayakları %99.2'de;
   köpeğin pençe ucu %0.6 / %20.8, ayakları %99.2. Zemin = yüz (56.25cqw) + ayaklar (56px). */
.pet { display: none; position: absolute; z-index: 3; pointer-events: none; }
.pet img { width: 100%; height: auto; }
/* Gölgeler: çimde durduklarını gösterir. Güneş fotoğrafta sol arkada, gölge sağ öne düşer.
   ::before geniş, yumuşak düşen gölge; ::after her ayağın altında koyu temas gölgesi.
   İkisi de kutunun alt şeridinde (%86–104): şeritteki y = (resimdeki y − 0.86) / 0.18.
   Hareketten bağımsız: ayaklar videoda yerinden oynamıyor. */
.pet::before, .pet::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; width: 100%; top: 86%; height: 18%;
}
.pet::before { filter: blur(7px); }
.pet::after { filter: blur(1.2px); }
/* kedi: sol bilboardın sol üst köşesine uzanır, pençesi çerçevenin üstünde */
.pet--kedi {
  --paw-x: 22cqw; --paw-y: 1cqw;
  left: var(--paw-x); top: var(--paw-y);
  width: calc((55.25cqw + 66px) * 0.912);
  transform: translate(-99.4%, -8.4%);
}
/* kedinin ayakları: öndeki x %28–43, alt %99.2; arkadaki x %44–65, alt %94 */
.pet--kedi::before { background: radial-gradient(40% 17% at 58% 70%, rgb(4 12 2 / .55), rgb(4 12 2 / 0)); }
.pet--kedi::after {
  background:
    radial-gradient(10.5% 7% at 35.5% 69%, rgb(4 10 2 / .92), rgb(4 10 2 / .5) 50%, rgb(4 10 2 / 0)),
    radial-gradient(12.5% 6.5% at 55% 42%, rgb(4 10 2 / .82), rgb(4 10 2 / .42) 50%, rgb(4 10 2 / 0));
}
/* köpek: ön patileri sağ bilboardın sağ üst köşesinde */
.pet--kopek {
  --paw-x: 88cqw; --paw-y: 6cqw;
  left: var(--paw-x); top: var(--paw-y);
  width: calc((50.25cqw + 66px) * 1.0306);
  transform: translate(-0.6%, -20.8%);
}
/* köpeğin ayakları: arkadaki x %43.5–56, alt %94; öndeki x %66–76, alt %99.2 */
.pet--kopek::before { background: radial-gradient(34% 17% at 67% 65%, rgb(4 12 2 / .55), rgb(4 12 2 / 0)); }
.pet--kopek::after {
  background:
    radial-gradient(9% 6.5% at 50% 41%, rgb(4 10 2 / .82), rgb(4 10 2 / .42) 50%, rgb(4 10 2 / 0)),
    radial-gradient(8% 7% at 71% 69%, rgb(4 10 2 / .92), rgb(4 10 2 / .5) 50%, rgb(4 10 2 / 0));
}
/* hareketli hâl: video fotoğrafın tam üstüne oturur. Video kareleri fotoğraftan biraz geniş
   (kuyruk ve pençe hareketine pay), bu yüzden kutu taşar: oranlar videoların kırpma ölçüsünden. */
.pet__video { position: absolute; display: block; max-width: none; object-fit: fill; pointer-events: none; opacity: 0; }
.pet--live .pet__video { opacity: 1; }
.pet--live img { visibility: hidden; }
.pet--kedi .pet__video { left: -3.317%; top: -2.342%; width: 106.732%; height: 104.685%; }
.pet--kopek .pet__video { left: -3.3%; top: -2.342%; width: 119.5%; height: 104.685%; }

/* Açılış: bölüm ekrana girince kedi soldan, köpek sağdan kayarak gelir; ayakları üstünde öne
   eğilip geri sallanarak pençelerini bilboarda koyar (js/motion.js: .pets-anim, .pets-in).
   Konum transform ile verildiği için hareket ayrı translate/rotate özellikleriyle yapılır.
   transform-origin dönme noktasını ayaklara koyar: konum kaydırması (-99.4% -8.4% kedi,
   -0.6% -20.8% köpek) önce uygulandığı için nokta = ayak (%50, %95) + kaydırma. */
.pet--kedi { transform-origin: -49.4% 86.6%; }
.pet--kopek { transform-origin: 49.4% 74.2%; }
.pets-anim:not(.pets-in) .pet { opacity: 0; }
.pets-anim.pets-in .pet--kedi { animation: pet-in-left 1.15s cubic-bezier(.22, .8, .3, 1) backwards; }
.pets-anim.pets-in .pet--kopek { animation: pet-in-right 1.15s cubic-bezier(.22, .8, .3, 1) .2s backwards; }
@keyframes pet-in-left {
  0% { opacity: 0; translate: -120% 0; rotate: -12deg; }
  30% { opacity: 1; }
  58% { translate: 4% 0; rotate: 6deg; }
  78% { translate: -1.5% 0; rotate: -2.5deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes pet-in-right {
  0% { opacity: 0; translate: 120% 0; rotate: 12deg; }
  30% { opacity: 1; }
  58% { translate: -4% 0; rotate: -6deg; }
  78% { translate: 1.5% 0; rotate: 2.5deg; }
  100% { translate: 0 0; rotate: 0deg; }
}

@media (min-width: 1200px) {
  /* iki yanda hayvanlara yer: bilboard sırası ekranın ~%69'u (1920'de 1341px, 1440'ta 1010px).
     Daha geniş olursa kedinin kuyruğu ve köpeğin arka bacakları ekran kenarında kesilir. */
  .campaigns .wrap { max-width: calc(min(1440px, 69vw + 16px) + 2 * var(--gutter)); }
  .billboards { grid-template-columns: 1fr 1fr; }
  .pet { display: block; }
}
.billboard__empty {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 6px; text-align: center; padding: 24px;
  background: repeating-linear-gradient(135deg, #F5F8FB 0 14px, #E7EEF5 14px 28px);
  color: var(--murekkep-2);
}
.billboard__empty strong { font: 600 var(--s-3)/1.15 var(--f-display); color: var(--murekkep); }

/* ---------- Evde PetCity: paylaşılan öğe geçişli galeri (js/gallery.js) ---------- */
/* başlık ortada ve büyük; not da büyüdü */
.gallery__head { text-align: center; max-width: 920px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 64px); }
.gallery__head .section-title { font-size: clamp(2.75rem, 6.6vw, 6.25rem); line-height: .95; letter-spacing: -0.03em; }
.gallery__head .section-note {
  max-width: 34em; margin: clamp(14px, 1.6vw, 22px) auto 0;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem); line-height: 1.5;
  text-wrap: balance;
}
/* başlık giriş hareketi (js/motion.js .head-anim ekler, ekrana girince .is-in; .anim-head olan her başlık):
   harfler sırayla yaylanarak yükselir, ardından not belirir. JS yoksa ya da
   "hareketi azalt" açıksa sınıf eklenmez, yazı olduğu gibi görünür. */
.anim-head .char { display: inline-block; }
.anim-head .word { display: inline-block; white-space: nowrap; }
.head-anim .char { opacity: 0; transform: translateY(.6em) rotate(8deg); transform-origin: 50% 100%; }
.head-anim .section-note { opacity: 0; transform: translateY(16px); }
.head-anim.is-in .char {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .8s cubic-bezier(.2, .9, .3, 1.3);
  transition-delay: calc(var(--i) * 38ms);
}
.head-anim.is-in .section-note {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .3, 1);
  transition-delay: calc(var(--n, 12) * 38ms + 120ms);
}
/* galeri duvarı: sayfa kabından (1240px) bağımsız, masaüstünde ekran genişliğinde */
.gallery__wall { max-width: 2400px; margin-inline: auto; padding-inline: clamp(16px, 2.5vw, 48px); }
/* Bileşenin düzeni: gap-4 (16px), rounded-xl (12px), başlıksız fotoğraflar; sütunlar md:3 lg:4.
   Telefonda bileşendeki tek sütun yerine 2 sütun: 12 fotoğrafla tek sütun ~4800px uzuyordu.
   Oranlar (yatay, kare, dikey, uzun) MOMENTS'taki ar / size ile verilir. */
.moments { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 10px; }
.moments .moment { margin-bottom: 10px; }
@media (min-width: 640px) { .moments { column-gap: 16px; } .moments .moment { margin-bottom: 16px; } }
@media (min-width: 768px) { .moments { columns: 3; } }
@media (min-width: 1024px) { .moments { columns: 4; } }
.moment { break-inside: avoid; margin: 0 0 16px; }
.moment__open {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 12px;
  background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.moment__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ar, 4 / 5); border-radius: 12px;
  background: var(--kaldirim-cizgi);
  /* hafif yaylı küçülme: bileşendeki hover 0.98, basınca 0.95 */
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.moment__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* perde: bileşendeki bg-black/10 yerine marka mürekkebi */
.moment__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--murekkep); opacity: 0; transition: opacity .2s;
}
@media (hover: hover) {
  .moment__open:hover .moment__frame { transform: scale(.98); }
  .moment__open:hover .moment__frame::after { opacity: .1; }
}
.moment__open:active .moment__frame { transform: scale(.95); }
.moment__open:active .moment__frame::after { opacity: .1; }
.moment__open:focus-visible { outline: none; }
.moment__open:focus-visible .moment__frame { outline: 3px solid var(--t-pembe); outline-offset: 3px; }

/* büyütülmüş görünüm: lacivert buzlu arka plan, fotoğrafın tamamı, altında başlık şeridi */
.lightbox { position: fixed; inset: 0; z-index: 90; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgb(22 34 79 / .86);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.lightbox__stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 16px 40px;
  cursor: zoom-out; touch-action: none; user-select: none; -webkit-user-select: none;
}
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lightbox__img {
  display: block; max-width: none;
  transform-origin: 0 0; clip-path: inset(0 round 10px);
  background: var(--murekkep);
  will-change: transform;
  -webkit-user-drag: none;
}
.lightbox__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  color: var(--beyaz); cursor: auto;
}
.lightbox__text { min-width: 0; }
.lightbox__text strong { display: block; font: 600 clamp(1.25rem, 2vw, 1.625rem)/1.15 var(--f-display); letter-spacing: -0.01em; }
.lightbox__text span { display: block; margin-top: 4px; color: rgb(250 248 243 / .78); }
.lightbox__product { flex: none; }
.lightbox__close {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgb(250 248 243 / .12); color: var(--beyaz);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; transition: background-color .15s;
}
.lightbox__close:hover { background: rgb(250 248 243 / .22); }
.lightbox__close:focus-visible { outline: 3px solid var(--beyaz); outline-offset: 2px; }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__hint { display: none; position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; text-align: center; color: rgb(250 248 243 / .6); font-size: var(--s-0); pointer-events: none; }
@media (pointer: coarse) { .lightbox__hint { display: block; } }

/* ---------- Ürünler: sokak tabelası filtreler ---------- */
.products { padding-top: clamp(56px, 7vw, 96px); }
.signs { display: flex; flex-wrap: wrap; gap: 10px; }
/* her kategori tabelası logodan bir renk (--c, app.js CATEGORIES), seçilince o renge boyanır.
   --c-ink: renkli zemindeki yazı (ahududu ve lacivertte kırık beyaz, diğerlerinde lacivert) */
.sign {
  --c: var(--murekkep); --c-ink: var(--beyaz);
  display: inline-flex; flex-direction: column; align-items: flex-start;
  min-height: 56px; padding: 6px 14px 7px;
  border: 2px solid var(--c); border-top-width: 6px; border-radius: 6px;
  background: var(--beyaz); color: var(--murekkep);
  font-family: var(--f-display); text-align: left; cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .2s;
}
.sign__n { font: 600 var(--s-0)/1.2 var(--f-body); opacity: .8; }
.sign__name { font-weight: 600; font-size: 1.0625rem; line-height: 1.15; letter-spacing: .005em; }
.sign:hover { background: color-mix(in srgb, var(--c) 14%, var(--beyaz)); }
.sign[aria-pressed="true"] {
  background: var(--c); color: var(--c-ink);
  /* gerçek tabeladaki iç çerçeve */
  box-shadow: inset 0 0 0 2px var(--c), inset 0 0 0 3.5px var(--c-ink), 0 10px 20px -12px var(--c);
}
.sign[aria-pressed="true"] .sign__n { opacity: .9; }
.result-count { margin: 22px 0 16px; color: var(--murekkep-2); font-size: var(--s-1); }

/* Ürünler giriş hareketi (js/motion.js). Hepsi animasyon, "backwards" dolgulu: bitince stil
   bırakılır, hover ve tıklama efektleri bozulmaz. "Hareketi azalt" açıksa sınıflar eklenmez.
   1) tabelalar, başlıktan sonra üstten asılıymış gibi sallanarak gelir */
.signs-anim:not(.is-in) .sign { opacity: 0; }
.signs-anim.is-in .sign {
  transform-origin: 50% -12px;
  animation: sign-swing 1.15s cubic-bezier(.3, .7, .3, 1) backwards;
  animation-delay: calc(var(--d0, 0ms) + var(--s, 0) * 70ms);
}
@keyframes sign-swing {
  0% { opacity: 0; transform: translateY(-16px) rotate(-12deg); }
  22% { opacity: 1; }
  40% { transform: translateY(0) rotate(7deg); }
  62% { transform: rotate(-3.5deg); }
  80% { transform: rotate(1.5deg); }
  100% { transform: none; }
}
/* seçilen tabela küçük bir sallanma yapar */
.signs-anim.is-in .sign.is-swing { transform-origin: 50% -12px; animation: sign-nudge .65s cubic-bezier(.3, .7, .3, 1); }
@keyframes sign-nudge { 30% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } 82% { transform: rotate(-1deg); } }
/* 2) kartlar ekrana girdikçe sıra sıra yükselir; süzgeç değişince yeni kartlar da */
.grid-anim .card:not(.is-in) { opacity: 0; transform: translateY(28px); }
.grid-anim .card.is-in { animation: card-in .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.97); } }
/* 3) sonuç sayısı değişince yumuşakça yenilenir */
.result-count.is-new { animation: count-in .4s ease; }
@keyframes count-in { from { opacity: 0; transform: translateY(-4px); } }
/* kartın üstüne gelince hafifçe kalkar, ürün fotoğrafı biraz büyür */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
  .card__img img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--c, var(--murekkep)) 70%, transparent); }
  .card:hover .card__img img { transform: scale(1.05); }
}

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(14px, 2vw, 22px);
}
/* kartın üstünde kategorisinin rengi (app.js: --c, --c-ink), bina çatısı gibi */
.card {
  --c: var(--t-sari); --c-ink: var(--murekkep);
  position: relative; display: flex; flex-direction: column;
  background: var(--beyaz); border-radius: var(--radius);
  border-top: 6px solid var(--c);
  box-shadow: 0 1px 2px rgb(1 34 91 / .06), 0 10px 24px -20px rgb(1 34 91 / .4);
}
.card__open {
  display: flex; flex-direction: column; flex: 1;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card__img { position: relative; display: block; aspect-ratio: 5 / 4; }
.card__img img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
/* 13 ürün fotoğrafının zemini saf beyaz: kırık beyaz kartta parlak kutu gibi durmasın diye
   "multiply" ile karışır (beyaz, kartın rengini alır; renkli kısımlar değişmez) */
.card__img img, .order__item img, .detail__stage img, .detail__thumbs img { mix-blend-mode: multiply; }
.card__body { padding: 4px 16px 10px; }
.card__name { font-weight: 600; line-height: 1.3; }
.card__open:hover .card__name { text-decoration: underline 2px var(--c); text-underline-offset: 4px; }
.card__pack { color: var(--murekkep-2); font-size: var(--s-1); }
.card__add {
  margin: 0 16px 16px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px;
  border: 1.5px solid var(--kaldirim-cizgi); border-radius: 999px;
  background: var(--beyaz); color: var(--murekkep);
  font: 600 var(--s-1)/1 var(--f-body); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.card__add svg { width: 14px; height: 14px; }
.card__add:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--beyaz)); }
.card__add[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--c-ink); }

/* ---------- Kapı numarası (ürün no) ---------- */
.door-no {
  display: inline-block;
  padding: 3px 8px 2px;
  border-radius: 4px;
  background: var(--tabela); color: var(--beyaz);
  box-shadow: inset 0 0 0 2px var(--tabela), inset 0 0 0 3px rgb(250 248 243 / .7);
  font: 600 var(--s-0)/1.25 var(--f-display); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.door-no--big { font-size: var(--s-5); padding: 6px 16px 4px; border-radius: 6px; box-shadow: inset 0 0 0 3px var(--tabela), inset 0 0 0 5px var(--beyaz); }

/* ---------- Toptan ---------- */
/* Toptan + İletişim tek koyu blok (.night): lacivert zemin, logo renklerinde ışıklar ("şehir
   ışıkları") iki bölüme yayılır. Işıklar px ölçülü: blok ekrana göre uzasa da aynı boyda kalır.
   Alt kenara yakın ışık yok: alt bilginin laciverti kesintisiz devam eder. Yazı kırık beyaz. */
.night {
  color: var(--beyaz);
  background:
    radial-gradient(900px 720px at 0% 0%, rgb(224 37 84 / .52), transparent 65%),
    radial-gradient(820px 660px at 100% 0%, rgb(2 180 202 / .44), transparent 65%),
    radial-gradient(900px 720px at 100% 52%, rgb(245 153 22 / .40), transparent 65%),
    radial-gradient(820px 640px at 0% 68%, rgb(108 180 46 / .34), transparent 65%),
    radial-gradient(700px 520px at 55% 88%, rgb(19 159 241 / .22), transparent 65%),
    var(--murekkep);
}
.bulk { color: var(--beyaz); }
.bulk a:not(.btn) { color: var(--beyaz); }
.bulk__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.bulk__lede { margin-top: 20px; font-size: var(--s-3); line-height: 1.45; max-width: 30em; }
.steps { list-style: none; counter-reset: step; margin: 36px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; color: rgb(250 248 243 / .82); }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px;
  background: var(--c, var(--beyaz)); color: var(--c-ink, var(--murekkep));
  font: 700 var(--s-3)/1 var(--f-display);
  box-shadow: 0 8px 18px -10px var(--c, transparent);
}
/* adım numaraları logo renklerinde */
.steps li:nth-child(4n+1) { --c: var(--pembe-dolgu); --c-ink: var(--beyaz); }
.steps li:nth-child(4n+2) { --c: var(--t-turuncu); --c-ink: var(--murekkep); }
.steps li:nth-child(4n+3) { --c: var(--t-sari); --c-ink: var(--murekkep); }
.steps li:nth-child(4n+4) { --c: var(--t-yesil); --c-ink: var(--murekkep); }
.steps strong { color: var(--beyaz); font-weight: 600; }
.bulk__direct { margin-top: 32px; color: rgb(250 248 243 / .82); }

.order { background: var(--beyaz); color: var(--murekkep); border-radius: 8px; padding: clamp(20px, 3vw, 32px); }
.order a:not(.btn) { color: var(--pembe-yazi); }
.order__title { font: 600 var(--s-4)/1.15 var(--f-display); display: flex; align-items: center; gap: 10px; }
.order__count { font: 600 var(--s-1)/1 var(--f-body); color: var(--murekkep-2); }
.order__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-height: 360px; overflow: auto; }
.order__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  padding: 8px; border: 1.5px solid var(--kaldirim-cizgi); border-radius: var(--radius);
}
.order__item img { width: 56px; height: 56px; object-fit: contain; }
.order__name { font-weight: 600; line-height: 1.25; }
.order__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; font-size: var(--s-1); color: var(--murekkep-2); }
.order__meta .door-no { font-size: var(--s-0); }
.qty { display: flex; flex-direction: column; font-size: var(--s-0); color: var(--murekkep-2); }
.qty input { width: 84px; }
.order__remove {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--murekkep-2); cursor: pointer;
}
.order__remove:hover { background: var(--kaldirim); color: var(--murekkep); }
.order__remove svg { width: 14px; height: 14px; }
.order__empty { margin-top: 14px; padding: 20px; border: 2px dashed var(--kaldirim-cizgi); border-radius: var(--radius); display: grid; gap: 14px; justify-items: start; color: var(--murekkep-2); }
.order__empty[hidden] { display: none; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 24px; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: var(--s-1); }
.field em { font-style: normal; font-weight: 400; color: var(--murekkep-2); }
.field--wide { grid-column: 1 / -1; }
input, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1.5px solid #B9C4D3; border-radius: var(--radius);
  background: var(--beyaz); color: var(--murekkep);
  font: 400 var(--s-2)/1.4 var(--f-body);
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--t-turuncu); outline-offset: 1px; border-color: var(--t-pembe); }
input[aria-invalid="true"] { border-color: #C2362B; }
.order__error { min-height: 1.5em; margin-top: 12px; color: #C2362B; font-weight: 600; font-size: var(--s-1); }
.order__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.order__status { min-height: 1.5em; margin-top: 10px; color: var(--wa); font-weight: 600; font-size: var(--s-1); }
.order__hint { color: var(--murekkep-2); font-size: var(--s-1); }

/* Form büyüdü: bölüm daha geniş (1440px), formun payı arttı, yazılar, alanlar ve düğmeler büyük */
.bulk .bulk__layout { max-width: 1440px; }
@media (min-width: 901px) { .bulk .bulk__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.order { padding: clamp(24px, 3.6vw, 52px); border-radius: 14px; box-shadow: 0 30px 60px -36px rgb(8 16 48 / .55); }
.order__title { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.order__count { font-size: var(--s-2); }
.order__list { gap: 12px; margin-top: 22px; max-height: 480px; }
.order__item { grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 16px; padding: 10px 14px 10px 10px; }
.order__item img { width: 72px; height: 72px; }
.order__name { font-size: 1.0625rem; }
.order .qty { font-size: var(--s-1); }
.order .qty input { width: 100px; }
.order__empty { margin-top: 18px; padding: 28px; font-size: var(--s-2); }
.order .fields { gap: 18px 22px; margin-top: 30px; }
.order .field { gap: 8px; font-size: var(--s-2); }
.order input, .order textarea { min-height: 56px; padding: 13px 16px; font-size: 1.0625rem; }
.order .order__actions { gap: 14px; margin-top: 10px; }
.order .btn { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.order__hint { margin-top: 6px; font-size: var(--s-2); }

/* perakende: Trendyol'a yönlendiren alt şerit */
.order__retail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin-top: 28px; padding-top: 26px; border-top: 2px dashed var(--kaldirim-cizgi);
}
.order__retail p { flex: 1 1 22em; margin: 0; color: var(--murekkep-2); font-size: var(--s-2); line-height: 1.5; }
.order__retail strong { display: block; color: var(--murekkep); font: 600 var(--s-3)/1.25 var(--f-display); margin-bottom: 2px; }
.order__retail .btn--store { flex: none; }

/* Koyu form: kırık beyaz kart lacivert bölümde göz yoruyordu. Kart bölümden bir ton açık lacivert,
   yazılar kırık beyaz; içindeki her şey koyu zemine göre. Karşıtlıklar: yazı 13:1, soluk yazı 7.5:1,
   sarı bağlantı 8.5:1, hata 6:1, başarı 8:1, alan içi ipucu 5:1. */
.order {
  --kart: #0C2961;
  --soluk: rgb(250 248 243 / .72);
  --cizgi: rgb(250 248 243 / .16);
  background: var(--kart); color: var(--beyaz);
  border: 1px solid rgb(250 248 243 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 30px 60px -30px rgb(0 0 0 / .6);
}
.order a:not(.btn) { color: var(--t-sari); }
.order__count, .order__meta, .order .qty, .field em, .order__hint, .order__retail p { color: var(--soluk); }
.order__empty { border-color: var(--cizgi); color: var(--soluk); }
.order__item { border-color: var(--cizgi); background: rgb(255 255 255 / .03); }
/* ürün fotoğrafı açık bir karoda: koyu zeminde "multiply" fotoğrafı karartırdı */
.order__item img { mix-blend-mode: normal; background: var(--beyaz); border-radius: 6px; padding: 4px; }
.order__remove { color: var(--soluk); }
.order__remove:hover { background: rgb(255 255 255 / .08); color: var(--beyaz); }
.order input, .order textarea {
  background: rgb(255 255 255 / .06); color: var(--beyaz);
  border-color: rgb(250 248 243 / .24);
}
.order input::placeholder, .order textarea::placeholder { color: rgb(250 248 243 / .6); }
.order input:hover, .order textarea:hover { border-color: rgb(250 248 243 / .4); }
.order input[aria-invalid="true"] { border-color: #FF8A80; }
.order__error { color: #FF8A80; }
.order__status { color: #7DDB9B; }
.order__retail { border-top-color: var(--cizgi); }
.order__retail strong { color: var(--beyaz); }
/* ikincil düğmeler koyu kartta: zemin kartla aynı, çerçeve yine logo renklerinde */
.order .btn--ghost, .order .btn--light {
  background: linear-gradient(var(--kart), var(--kart)) padding-box, var(--grad-sehir) border-box;
  color: var(--beyaz);
}
.order .btn--ghost:hover, .order .btn--light:hover {
  background: linear-gradient(#16377A, #16377A) padding-box, var(--grad-sehir) border-box;
}

/* ---------- İletişim ---------- */
.contact__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.street-sign {
  display: inline-flex; flex-direction: column; margin-top: 32px;
  padding: 10px 26px 12px;
  background: var(--tabela); color: var(--beyaz);
  border-radius: 6px;
  box-shadow: inset 0 0 0 4px var(--tabela), inset 0 0 0 6px var(--beyaz);
  font-family: var(--f-display);
}
.street-sign__mah { font-weight: 500; font-size: var(--s-2); line-height: 1.2; }
.street-sign__cad { font-weight: 700; font-size: clamp(1.875rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; }
.contact__place .door-no--big { margin-left: 10px; vertical-align: bottom; }
.contact__address { margin-top: 22px; font-style: normal; font-size: var(--s-3); line-height: 1.45; max-width: 26em; }
.text-link { display: inline-block; margin-top: 10px; font-weight: 600; }
.contact__list { margin: 0; display: grid; gap: 0; padding-top: 6px; }
.contact__list div { display: grid; grid-template-columns: minmax(130px, 2fr) 3fr; gap: 16px; padding: 18px 0; border-bottom: 1.5px solid var(--kaldirim-cizgi); }
.contact__list div:first-child { border-top: 1.5px solid var(--kaldirim-cizgi); }
.contact__list dt { color: var(--murekkep-2); }
.contact__list dd { margin: 0; font-weight: 600; font-size: var(--s-3); line-height: 1.3; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* İletişim koyu blokta (.night): zemin bloktan gelir, yazılar kırık beyaz, bağlantılar güneş sarısı
   (8.5:1). Toptan ile arasında iki bölüm boşluğu birikmesin diye üst boşluk kısaldı. */
.night .contact { background: none; padding-top: clamp(24px, 4vw, 56px); }
.night .contact__address { color: var(--beyaz); }
.night .contact a:not(.btn) { color: var(--t-sari); }
.night .contact__list div { border-color: rgb(250 248 243 / .16); }
.night .contact__list dt { color: rgb(250 248 243 / .72); }
.night .contact__list dd { color: var(--beyaz); }
/* tabela ve kapı numarası lacivert zeminde gömülmesin: hafif gölge */
.night .street-sign { box-shadow: inset 0 0 0 4px var(--tabela), inset 0 0 0 6px var(--beyaz), 0 16px 30px -14px rgb(0 0 0 / .65); }
.night .door-no--big { box-shadow: inset 0 0 0 3px var(--tabela), inset 0 0 0 5px var(--beyaz), 0 12px 24px -12px rgb(0 0 0 / .65); }

/* ---------- Alt bilgi ---------- */
.site-footer { background: var(--murekkep); color: #C9D3EA; padding-bottom: 28px; }
.site-footer__skyline {
  height: 48px;
  background: linear-gradient(90deg,
    var(--t-mavi) 0 16.66%, var(--t-pembe) 0 33.33%, var(--t-sari) 0 50%,
    var(--t-yesil) 0 66.66%, var(--t-turuncu) 0 83.33%, var(--t-turkuaz) 0);
  clip-path: polygon(0 40%, 6% 40%, 6% 0, 12% 0, 12% 55%, 20% 55%, 20% 20%, 27% 20%, 27% 60%, 33% 60%, 33% 10%, 40% 10%, 40% 45%, 47% 45%, 47% 0, 53% 0, 53% 50%, 60% 50%, 60% 25%, 67% 25%, 67% 60%, 74% 60%, 74% 5%, 80% 5%, 80% 40%, 87% 40%, 87% 15%, 94% 15%, 94% 50%, 100% 50%, 100% 100%, 0 100%);
  background-color: var(--kaldirim);
}
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 28px; font-size: var(--s-1); }
.site-footer__logo { height: 52px; width: auto; }
.site-footer__row p:last-child { margin-left: auto; }
/* şirket unvanı: masaüstünde sağa yaslı, telefonda sola */
.site-footer__legal { text-align: right; line-height: 1.6; }

/* ---------- Toptan listesi kısayolu ---------- */
.list-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 10px 0 20px;
  border-radius: 999px;
  background: var(--grad-ahududu); color: var(--beyaz);
  font: 600 1rem/1 var(--f-display); text-decoration: none;
  box-shadow: 0 12px 28px -10px rgb(224 37 84 / .7);
}
.list-fab[hidden] { display: none; }
/* Toptan bölümündeyken gizlenir. visibility: görünmezken Tab ile de ulaşılmasın
   (kaybolma hareketi bitince gizlenir, belirirken hemen görünür) */
.list-fab.is-away { opacity: 0; pointer-events: none; transform: translateY(12px); visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s; }
.list-fab { transition: opacity .2s, transform .2s, visibility 0s; }
.list-fab__n { min-width: 32px; height: 32px; display: grid; place-items: center; padding: 0 8px; border-radius: 999px; background: var(--t-sari); color: var(--murekkep); font-weight: 700; }
.list-fab.is-bumped .list-fab__n { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.3); } }

/* ---------- Ürün detayı ---------- */
.detail {
  width: min(1040px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 0; border: 0; border-radius: 10px;
  background: var(--beyaz); color: var(--murekkep);
}
.detail::backdrop { background: rgb(1 34 91 / .55); }
.detail[open] { animation: detail-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes detail-in { from { opacity: 0; transform: translateY(14px); } }
.detail__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.detail__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--kaldirim); color: var(--murekkep); cursor: pointer;
}
.detail__close svg { width: 18px; height: 18px; }
.detail__gallery { padding: 20px; background: var(--beyaz); border-right: 1.5px solid var(--kaldirim-cizgi); }
.detail__stage { position: relative; aspect-ratio: 1 / 1; }
.detail__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .15s; }
/* yeni ürünün fotoğrafı gelene kadar öncekini gösterme (js/app.js showImage) */
.detail__stage img.is-loading { opacity: 0; }
.detail__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.detail__thumbs button { flex: none; width: 64px; height: 64px; padding: 3px; border: 2px solid var(--kaldirim-cizgi); border-radius: 5px; background: var(--beyaz); cursor: pointer; }
.detail__thumbs button[aria-current="true"] { border-color: var(--t-pembe); }
.detail__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.detail__info { padding: 56px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.detail__line { color: var(--murekkep-2); font-weight: 600; font-size: var(--s-1); }
.detail__title { font: 700 clamp(1.5rem, 2.4vw, 1.875rem)/1.12 var(--f-display); letter-spacing: -0.015em; margin-top: -10px; }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; align-items: center; }
.specs dt { color: var(--murekkep-2); font-size: var(--s-1); }
.specs dd { margin: 0; font-weight: 600; }
.features { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--murekkep); }
.features:empty { display: none; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.detail__note { color: var(--murekkep-2); font-size: var(--s-0); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1180px) {
  /* sağdaki bağlantılar Trendyol düğmesine çarpmasın: yalnızca logo ortada kalır */
  .site-nav__side { display: none; }
}
@media (max-width: 760px) {
  /* telefonda büyütülmüş fotoğrafın başlık şeridi alt alta: düğme tam genişlik */
  .lightbox__cap { flex-direction: column; align-items: stretch; }
  .lightbox__product { width: 100%; }
  .lightbox__close { top: 12px; right: 12px; }
}
@media (max-width: 900px) {
  .bulk__layout, .contact__layout { grid-template-columns: 1fr; }
  .detail__inner { grid-template-columns: 1fr; }
  .detail__gallery { border-right: 0; border-bottom: 1.5px solid var(--kaldirim-cizgi); }
  .detail__stage { aspect-ratio: 4 / 3; }
  .detail__info { padding-top: 24px; }
}
.hero picture { display: contents; }  /* <picture> düzene girmesin, img doğrudan .hero'ya göre konumlanır */
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  /* Telefonda ve dikey tablette de masaüstü gibi: fotoğraf, siyah filtre, yazı üstünde.
     Fotoğraf burada aynı sahnenin dikey (9:16) çekimi (index.html'deki <picture>).
     Yazı alta oturur, dostların yüzleri yazının üstünde kalır. */
  /* en az 760px: kısa telefonda (667px) yazı bloğu dostların yüzüne binmesin; düğmeler biraz kaydırınca görünür */
  /* Hero bir sütun: üstte fotoğraf, altta yazı bloğu. Fotoğraf yazının üstünde kalan alanı
     doldurur ve yazının arkasına 120px biner. Böylece dostlar her zaman başlığın hemen üstünde
     kalır: ekran boyu (Safari'nin araç çubukları, kısa telefonlar) bunu değiştirmez.
     Fotoğraf tam genişlikte, dikeyde kırpılır: %55 ile üstteki boş duvardan daha çok kesilir.
     Altı lacivert zemine erir (yazının arkası zaten koyu). */
  .hero {
    min-height: max(100svh, 760px); background: rgb(4 10 28);
    flex-direction: column; align-items: stretch; justify-content: flex-end;
  }
  .hero__photo {
    position: relative; inset: auto;
    flex: 1 1 0; min-height: 0; width: 100%; height: auto;
    margin-bottom: -120px;
    object-position: 50% 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
    mask-image: linear-gradient(180deg, #000 80%, transparent);
  }
  /* üstte menü için koyu şerit, fotoğrafın geri kalanı hafif kararır */
  .hero::before {
    background: linear-gradient(180deg, rgb(4 10 28 / .55) 0%, rgb(4 10 28 / .1) 16%, rgb(4 10 28 / .1) 100%);
  }
  .hero__copy { padding: 0 var(--gutter) clamp(28px, 7vw, 56px); max-width: 640px; }
  /* yazının arkasındaki koyu alan yazı bloğuyla birlikte gelir: hangi ekranda olursa olsun
     yazının 120px üstünden koyulaşmaya başlar, dostların yüzleri açık kalır. Tüm genişliği kaplar
     (hero taşanı keser). Karşıtlık: lede'nin arkası en az %88 koyu. */
  .hero__copy::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: -130px; bottom: 0; left: -100vw; right: -100vw;
    background: linear-gradient(180deg, rgb(4 10 28 / 0) 0, rgb(4 10 28 / .72) 110px, rgb(4 10 28 / .9) 190px, rgb(4 10 28 / .92) 100%);
  }
  .hero__lede { font-size: clamp(1.125rem, 4.8vw, 1.3125rem); max-width: none; }
  /* telefonda başlık ekran genişliğiyle büyür: 320 px'te 44px, 375'te 51px, 414'te 56px; "Minik dostların" tek satırda kalır */
  .hero__title { font-size: clamp(2.75rem, 13.6vw, 4.5rem); }
  /* iki bağlantı 320 px'te bile yan yana sığsın: yazı ekranla küçülür (17–20px), ara 22px */
  .hero__actions { column-gap: 22px; }
  .hero__actions .btn { font-size: clamp(1.0625rem, 5.2vw, 1.25rem); }
}
@media (max-width: 560px) {
  .site-header { padding-block: 10px; }
  .logo__img { height: 54px; }
  .site-header.is-stuck { padding-block: 6px; }
  .site-header.is-stuck .logo__img { height: 44px; }
  html { scroll-padding-top: 60px; }
  .site-header__store { min-height: 40px; padding: 0 12px; font-size: var(--s-0); }
  .site-header__store-long { display: none; }
  .grid { grid-template-columns: 1fr 1fr; }
  .card__body { padding-inline: 10px; }
  .card__add { margin-inline: 10px; }
  .fields { grid-template-columns: 1fr; }
  .order__list { max-height: none; }
  .order__item { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .order__item img { width: 48px; height: 48px; }
  .qty { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
  .order__remove { grid-row: 1; grid-column: 3; }
  .contact__list div { grid-template-columns: 1fr; gap: 2px; }
  .site-footer__row p:last-child { margin-left: 0; }
  .site-footer__legal { text-align: left; }
}

/* En dar telefonlar (320 px): Trendyol düğmesi logoya değmesin, ok simgesi gizlenir; hero bağlantıları biraz küçülür */
@media (max-width: 359px) {
  .site-header__store { padding: 0 10px; }
  .site-header__store .ext { display: none; }
  /* hero bağlantıları da yan yana kalsın */
  .hero__actions { column-gap: 16px; }
  .hero__actions .btn { font-size: 1rem; }
}
/* 561–640 px: logo büyük boyda ama yer dar; uzun "Trendyol mağazası" logoya değiyordu, kısa ad kalır */
@media (max-width: 640px) {
  .site-header__store-long { display: none; }
}