/* ============================================================
   SERDİVAN ÇOCUK — v3 "LOGO TEMASI"
   Müşterinin logosundan türetildi: turuncu zemin · yırtık kenarlı krem etiket
   · renkli kelimeler (yeşil / turuncu / mavi / mercan) · karalama doodle'lar.
   Kit bağımlılığı YOK (kitkat-web'in diliyle çelişiyordu); fontlar
   kit/fonts-site.css (Gluten + Nunito, yerel woff2).
   Kural: metin her zaman krem etiket ya da koyu mürekkep üstünde okunur;
   doygun renkler kelime vurgusu, rozet ve doodle'da.
   ============================================================ */

:root {
  --font-display: "Gluten", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Logo paleti */
  --c-orange:   #f5a623;
  --c-orange-2: #d98d12;
  --c-paper:    #f8f4e9;
  --c-paper-2:  #ede6d3;
  --c-ink:      #2f2c3f;
  --c-ink-2:    #58546b;
  --c-green:    #35b564;  --c-green-d: #1f8f4a;  --c-green-t: #e2f5e8;
  --c-tang:     #ff6a2a;  --c-tang-d:  #d9541a;
  --c-coral:    #ff6b5a;  --c-coral-d: #d84e3f;
  --c-blue:     #4a64f0;  --c-blue-d:  #3247c8;
  --c-purple:   #b98be0;  --c-purple-d:#8a5fc0;
  --c-teal:     #1f8f7c;
  --c-sky:      #7cb9f0;
  --c-mustard:  #e9b92c;
  --c-maroon:   #a84b5a;
  --c-pink:     #f58cb0;
  --c-night:    #2b3a8f;
  --c-night-2:  #1f2b6e;
  --c-cream:    #fff7dc;

  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-tiny: .75rem;
  --fs-lead: clamp(1.0625rem, .98rem + .4vw, 1.25rem);
  --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --fs-h2: clamp(1.9rem, 1.45rem + 1.8vw, 3.1rem);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --w-content: 1200px;
  --sec-y: clamp(56px, 7vw, 120px);
  --dur-1: 120ms; --dur-2: 220ms; --dur-4: 600ms;
  --ease-out: cubic-bezier(.2,.8,.3,1);
  --ease-throw: cubic-bezier(.34,1.4,.64,1);
  color-scheme: light;
}

/* ---------- Taban ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--c-orange); color: var(--c-ink); font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600; line-height: 1.55; min-height: 100dvh; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
:where(a) { color: inherit; }
:where(a, button):focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--c-blue); color: #fff; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--c-ink); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; font-synthesis: none; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); }
h2 { font-size: var(--fs-h2); }
h3 { font-family: var(--font-ui); font-weight: 900; font-size: var(--fs-h3); line-height: 1.15; }
.wrap { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.lead { font-size: var(--fs-lead); color: var(--c-ink-2); max-width: 46ch; font-weight: 600; }
.body { color: var(--c-ink-2); }

/* Renk yardımcıları */
.c-green { color: var(--c-green-d); } .c-tang { color: var(--c-tang-d); } .c-blue { color: var(--c-blue-d); } .c-coral { color: var(--c-coral-d); }
.c-purple { color: var(--c-purple-d); } .c-teal { color: var(--c-teal); } .c-mustard { color: var(--c-mustard); } .c-maroon { color: var(--c-maroon); }
.c-sky { color: var(--c-sky); } .c-cream { color: var(--c-cream); }
.bg-green { background: var(--c-green); } .bg-tang { background: var(--c-tang); } .bg-blue { background: var(--c-blue); color: #fff; }
.bg-coral { background: var(--c-coral); } .bg-mustard { background: var(--c-mustard); } .bg-purple { background: var(--c-purple); }

/* Eyebrow */
.eyebrow { font-weight: 900; font-size: var(--fs-tiny); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
.eyebrow::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.eyebrow.on-orange { color: var(--c-ink); }
.eyebrow.on-green { color: var(--c-ink); }

/* ---------- Yırtık kâğıt etiket ---------- */
.paper { position: relative; isolation: isolate; }
.paper::before { content: ""; position: absolute; inset: 0; background: var(--paper-bg, var(--c-paper)); border-radius: 6px; filter: url(#torn); z-index: -1; box-shadow: 0 10px 0 rgba(47,44,63,.10); }
.paper.sm::before { filter: url(#torn-sm); box-shadow: 0 5px 0 rgba(47,44,63,.10); }
.paper.green { --paper-bg: var(--c-green); color: var(--c-ink); }
.paper.green h3, .paper.green p { color: var(--c-ink); }
.tilt-l { transform: rotate(-1.4deg); } .tilt-r { transform: rotate(1.2deg); }
@media (max-width: 560px) { .tilt-l { transform: rotate(-.8deg); } .tilt-r { transform: rotate(.7deg); } }

/* ---------- Doodle'lar ---------- */
.dd { position: absolute; width: 56px; height: auto; aspect-ratio: 1; pointer-events: none; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dd { animation: dbob 7s ease-in-out infinite; }
  .dd:nth-of-type(2n) { animation-duration: 9s; animation-delay: -3s; }
  .dd:nth-of-type(3n) { animation-duration: 6s; animation-delay: -1.5s; }
  @keyframes dbob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(6deg); } }
}
/* hero */
.d1 { width: 110px; aspect-ratio: 64/36; inset-block-start: 8%; inset-inline-start: 3%; }
.d2 { width: 64px; inset-block-start: 14%; inset-inline-end: 4%; }
.d3 { width: 48px; inset-block-end: 12%; inset-inline-start: 5%; }
.d4 { width: 40px; inset-block-start: 46%; inset-inline-end: 2%; }
.d5 { width: 44px; inset-block-end: 8%; inset-inline-end: 8%; }
.d6 { width: 120px; aspect-ratio: 80/20; inset-block-start: 4%; inset-inline-start: 46%; }
.d7 { width: 36px; inset-block-start: 62%; inset-inline-start: 1.5%; }
/* alanlar (turuncu) */
.d8 { width: 100px; aspect-ratio: 64/36; inset-block-start: 3%; inset-inline-end: 4%; }
.d9 { width: 52px; inset-block-start: 40%; inset-inline-start: 1.5%; }
.d10 { width: 44px; inset-block-end: 6%; inset-inline-end: 3%; }
/* atölyeler (krem) */
.d11 { width: 64px; inset-block-start: 6%; inset-inline-start: 3%; }
.d12 { width: 96px; aspect-ratio: 64/36; inset-block-end: 8%; inset-inline-start: 6%; }
.d13 { width: 40px; inset-block-start: 12%; inset-inline-end: 5%; }
.d14 { width: 90px; aspect-ratio: 64/40; inset-block-end: 10%; inset-inline-end: 3%; }
/* doğum günü (turuncu) */
.d15 { width: 110px; aspect-ratio: 64/36; inset-block-start: 5%; inset-inline-start: 4%; }
.d16 { width: 56px; inset-block-end: 12%; inset-inline-start: 2%; }
.d17 { width: 48px; inset-block-start: 10%; inset-inline-end: 4%; }
.d18 { width: 44px; inset-block-end: 8%; inset-inline-end: 6%; }
/* aileler (nane) */
.d19 { width: 130px; aspect-ratio: 80/20; inset-block-start: 8%; inset-inline-end: 6%; }
.d20 { width: 40px; inset-block-end: 12%; inset-inline-start: 3%; }
/* ziyaret (krem) */
.d21 { width: 100px; aspect-ratio: 64/36; inset-block-start: 4%; inset-inline-end: 4%; }
.d22 { width: 44px; inset-block-end: 8%; inset-inline-start: 3%; }
/* footer */
.f1 { width: 44px; inset-block-start: 10%; inset-inline-start: 4%; }
.f2 { width: 110px; aspect-ratio: 64/36; inset-block-start: 8%; inset-inline-end: 5%; }
.f3 { width: 48px; inset-block-end: 14%; inset-inline-end: 3%; }
.f4 { width: 52px; inset-block-start: 40%; inset-inline-start: 2%; }
.f5 { width: 100px; aspect-ratio: 64/40; inset-block-end: 28%; inset-inline-end: 12%; }
@media (max-width: 760px) { .dd { width: 34px; } .d1, .d6, .d8, .d12, .d15, .d19, .d21, .f2 { width: 70px; } .d4, .d7, .d13, .d20, .d22, .f4, .f5, .d14 { display: none; } }

/* ---------- Butonlar ---------- */
.btn { appearance: none; font: inherit; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--c-ink); background: var(--c-paper); box-shadow: 0 5px 0 var(--btn-sh, var(--c-paper-2)); transition: transform var(--dur-2) var(--ease-throw), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1); }
.btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 7px 0 var(--btn-sh, var(--c-paper-2)); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--btn-sh, var(--c-paper-2)); }
.btn.lg { min-height: 58px; padding-inline: 28px; font-size: var(--fs-lead); }
.btn.blue { background: var(--c-blue); color: #fff; --btn-sh: var(--c-blue-d); }
.btn.green { background: var(--c-green); color: var(--c-ink); --btn-sh: var(--c-green-d); }
.btn.paperbtn { background: var(--c-paper); color: var(--c-ink); --btn-sh: var(--c-paper-2); }

/* ---------- Nav ---------- */
.nav { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in oklab, var(--c-orange) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav .wrap { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }
.brand { text-decoration: none; display: inline-block; }
.brand-label { display: inline-block; padding: 8px 16px 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; transform: rotate(-2deg); }
.brand-label b { font-weight: 800; }
.navlinks { display: flex; align-items: center; gap: var(--sp-1); }
.navlinks a { font-size: var(--fs-small); font-weight: 900; color: var(--c-ink); text-decoration: none; padding: var(--sp-2) var(--sp-3); border-radius: 999px; transition: background-color var(--dur-1) var(--ease-out); }
.navlinks a:hover { background: var(--c-paper); }
.nav .btn { margin-inline-start: auto; }
@media (max-width: 760px) { .navlinks { display: none; } }
@media (max-width: 420px) { .nav .btn { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: clip; padding-block: clamp(28px, 4vw, 64px) clamp(56px, 7vw, 110px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; position: relative; z-index: 2; }
.hero-copy { display: grid; gap: var(--sp-5); justify-items: start; }
.hero-copy h1 { max-width: 16ch; }
.hero-copy .lead { max-width: 44ch; color: var(--c-ink); }
.cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Logo etiketi — logonun kodla yeniden çizimi */
.logo-label { display: grid; justify-items: center; gap: 0; padding: clamp(30px, 4.4vw, 52px) clamp(24px, 4vw, 56px) clamp(22px, 3.4vw, 36px); transform: rotate(-2deg); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: .02em; font-synthesis: none; width: min(100%, 600px); }
.logo-label .w { white-space: nowrap; }
.logo-label .w { display: block; text-shadow: 3px 3px 0 rgba(47,44,63,.10); position: relative; z-index: 2; }
.w-ozel { color: var(--c-coral); font-size: clamp(1rem, .8rem + .9vw, 1.5rem); letter-spacing: .12em; justify-self: start; margin-inline-start: 2%; margin-block-end: .3em; }
.w-serdivan { color: var(--c-green); font-size: clamp(2.3rem, 1.2rem + 4vw, 4.7rem); }
.w-cocuk { color: var(--c-tang); font-size: clamp(2.3rem, 1.2rem + 4vw, 4.7rem); margin-block-start: -.06em; }
.w-oyunevi { color: var(--c-blue); font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); letter-spacing: .12em; margin-block-start: .14em; }
[data-wobble] i { display: inline-block; font-style: normal; transform: rotate(var(--r, 0)) translateY(var(--y, 0)); }
.logo-label .dd { z-index: 3; }
.l1 { width: 30px; inset-block-start: 6%; inset-inline-start: 50%; }
.l2 { width: 74px; aspect-ratio: 64/40; inset-block-start: 3%; inset-inline-start: 30%; }
.l3 { width: 84px; aspect-ratio: 64/36; inset-block-start: 6%; inset-inline-end: 18%; }
.l4 { width: 30px; inset-block-start: 6%; inset-inline-end: 4%; }
.l5 { width: 40px; inset-block-start: 38%; inset-inline-end: 4%; }
.l6 { width: 28px; inset-block-end: 12%; inset-inline-start: 6%; }
.l7 { width: 24px; inset-block-end: 22%; inset-inline-start: 13%; }
@media (max-width: 560px) { .l2 { width: 52px; } .l3 { width: 60px; } .l5 { width: 30px; } }

.hero-art { position: relative; padding: 10px 14px 44px 6px; }
.hero-art .photo { aspect-ratio: 4 / 3; }
.hero-note { position: absolute; inset-inline-start: 0; inset-block-end: 6px; max-width: min(80%, 320px); padding: 14px 20px 12px; display: grid; gap: 2px; z-index: 3; }
.hero-note b { font-weight: 900; font-size: var(--fs-small); }
.hero-note span { font-size: var(--fs-tiny); font-weight: 700; color: var(--c-ink-2); line-height: 1.35; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { justify-items: stretch; }
  .logo-label { justify-self: center; }
}
@media (max-width: 560px) {
  .hero-art { padding: 8px 8px 0 4px; }
  .hero-note { position: static; max-width: none; margin: -6px 12px 0; transform: rotate(-1deg); }
}

/* Fotoğraf: kâğıt çerçeve içinde */
.photo { position: relative; padding: 10px; }
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: inherit; }
.photo .tag { position: absolute; inset-inline-start: 22px; inset-block-start: 22px; font-weight: 900; font-size: var(--fs-tiny); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); background: var(--c-paper); padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 0 var(--c-paper-2); z-index: 2; }
.photo img { transition: transform var(--dur-4) var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .photo:hover img { transform: scale(1.02); } }

/* ---------- Kayan şerit ---------- */
.ticker { background: var(--c-paper); overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); line-height: 1; text-transform: uppercase; letter-spacing: .03em; box-shadow: inset 0 6px 0 var(--c-orange-2); }
.ticker-track { display: flex; align-items: center; width: max-content; gap: var(--sp-6); padding-block: 18px 14px; white-space: nowrap; }
.ticker-track i { display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: var(--c-mustard); }
.ticker-track i:nth-of-type(4n+2) { background: var(--c-purple); } .ticker-track i:nth-of-type(4n+3) { background: var(--c-coral); } .ticker-track i:nth-of-type(4n+4) { background: var(--c-teal); }
.ticker .c-green { color: var(--c-green); } .ticker .c-tang { color: var(--c-tang); } .ticker .c-blue { color: var(--c-blue); } .ticker .c-coral { color: var(--c-coral); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: tick 30s linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
  @keyframes tick { to { transform: translateX(-50%); } }
}

/* ---------- Bilgi şeridi ---------- */
.strip { background: var(--c-paper); border-block-start: 3px dashed var(--c-paper-2); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip a { display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; text-decoration: none; min-width: 0; }
.strip b { font-weight: 800; font-size: var(--fs-small); color: var(--c-ink); overflow-wrap: anywhere; }
.strip a:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: currentColor; text-underline-offset: 3px; }
@media (max-width: 760px) { .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .strip .wrap { grid-template-columns: 1fr; } }

/* ---------- Bölümler ---------- */
.sec { position: relative; overflow: clip; padding-block: var(--sec-y); }
.sec.orange { background: var(--c-orange); }
.sec.cream { background: var(--c-paper); }
.sec.mint { background: var(--c-green-t); }
.sec .wrap { position: relative; z-index: 2; }
/* bölüm geçişi: yırtık kâğıt hissi (dalgalı kenar) */
.sec.cream::before, .sec.mint::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: -16px; height: 18px; background: inherit; clip-path: polygon(0 100%, 2% 20%, 5% 90%, 8% 10%, 11% 80%, 14% 30%, 17% 95%, 20% 15%, 23% 70%, 26% 25%, 29% 90%, 32% 5%, 35% 75%, 38% 35%, 41% 95%, 44% 20%, 47% 80%, 50% 10%, 53% 85%, 56% 30%, 59% 95%, 62% 15%, 65% 70%, 68% 25%, 71% 90%, 74% 5%, 77% 80%, 80% 35%, 83% 95%, 86% 20%, 89% 75%, 92% 10%, 95% 85%, 98% 30%, 100% 90%, 100% 100%); z-index: 1; }
.sechead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-4) var(--sp-7); align-items: end; margin-block-end: clamp(28px, 4vw, 48px); }
.sechead > div { display: grid; gap: var(--sp-3); }
.sechead .lead { max-width: 42ch; }
.sec.orange .lead { color: var(--c-ink); }
@media (max-width: 760px) { .sechead { grid-template-columns: 1fr; } }

/* Alanlar: kâğıt etiket bento */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px) clamp(16px, 2.5vw, 28px); }
.tile { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; padding: 12px 12px 18px; }
.tile .photo { padding: 0; }
.tile .photo::before { display: none; }
.tile .photo img { aspect-ratio: 4 / 3; }
.tile figcaption { padding-inline: 6px; display: grid; gap: 4px; }
.tile h3 { margin-block-start: var(--sp-1); }
.tile p { color: var(--c-ink-2); font-size: var(--fs-small); max-width: 38ch; }
.tile.big { grid-column: span 4; grid-row: span 2; grid-template-rows: minmax(0, 1fr) auto; }
.tile.big .photo { min-height: 0; height: 100%; }
.tile.big .photo img { aspect-ratio: auto; height: 100%; }
.tile.small { grid-column: span 2; }
.tile.wide { grid-column: span 3; }
.tile.note { grid-column: span 3; padding: clamp(22px, 3vw, 40px); align-content: end; gap: var(--sp-2); overflow: visible; }
.tile.note h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.tile.note p:not(.eyebrow) { font-size: var(--fs-body); max-width: 34ch; }
.n1 { width: 40px; inset-block-start: 10%; inset-inline-end: 8%; } .n2 { width: 64px; inset-block-start: 8%; inset-inline-start: 8%; } .n3 { width: 110px; aspect-ratio: 80/20; inset-block-start: 40%; inset-inline-end: 6%; }
@media (max-width: 900px) {
  .tile.big { grid-column: span 6; grid-row: auto; grid-template-rows: auto auto; }
  .tile.big .photo { height: auto; } .tile.big .photo img { aspect-ratio: 4 / 3; height: auto; }
  .tile.small { grid-column: span 3; }
  .tile.wide, .tile.note { grid-column: span 6; }
  .tile.note { min-height: 220px; }
}
@media (max-width: 560px) { .tile.small { grid-column: span 6; } }

/* İki sütun */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.split.flip > .split-art { order: 2; }
.split-copy { display: grid; gap: var(--sp-5); }
.split-copy.card { padding: clamp(22px, 3vw, 40px); }
.split-art { display: grid; gap: var(--sp-4); padding: 8px; }
.split-art .photo { aspect-ratio: 4 / 3; }
.pair { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-5); align-items: end; }
.pair .photo:last-child { aspect-ratio: 1; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.flip > .split-art { order: 0; } }

/* Numaralı satırlar: renkli rozet */
.rows { display: grid; gap: var(--sp-3); }
.rows > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.num { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1; color: var(--c-ink); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 4px 0 rgba(47,44,63,.15); transform: rotate(-6deg); }
.rows > div:nth-child(2) .num { transform: rotate(5deg); }
.rows h3 { font-size: var(--fs-body); margin-block: 6px 2px; }
.rows p { color: var(--c-ink-2); font-size: var(--fs-small); }

/* ---------- Ziyaret ---------- */
.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: start; }
.visit-card { display: grid; gap: var(--sp-5); align-content: start; padding: clamp(22px, 3vw, 40px); }
.visit-card address { font-style: normal; display: grid; gap: var(--sp-1); }
.visit-card address b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.visit-card address span { color: var(--c-ink-2); }
.visit-card .eyebrow { margin-block-end: var(--sp-1); }
.visit-card .tel { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--c-ink); text-decoration: none; }
.visit-card .tel:hover { color: var(--c-coral-d); }
.visit-map { display: grid; gap: var(--sp-5); padding: 8px; }
.visit-map .photo { aspect-ratio: 3 / 2; }
.map { padding: 10px; aspect-ratio: 16 / 8; --paper-bg: var(--c-paper-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 12px; }
.pin { position: absolute; width: 44px; aspect-ratio: 40/52; inset-block-start: -18px; inset-inline-end: 24px; z-index: 3; filter: drop-shadow(0 4px 0 rgba(47,44,63,.2)); }
@media (prefers-reduced-motion: no-preference) { .pin { animation: hop 1.8s ease-in-out infinite; } @keyframes hop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } }

/* ---------- Ayak ---------- */
.foot { position: relative; overflow: clip; background: var(--c-night); color: var(--c-paper); padding-block: clamp(48px, 6vw, 88px) calc(clamp(32px, 5vw, 56px) + var(--bar-h, 0px)); }
.foot .wrap { display: grid; gap: var(--sp-6); position: relative; z-index: 2; }
.foot .mark { font-family: var(--font-display); font-weight: 800; line-height: .95; font-size: clamp(2.2rem, 1rem + 6.5vw, 6rem); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; text-shadow: 4px 4px 0 var(--c-night-2); }
.foot .mark .c-green { color: var(--c-green); } .foot .mark .c-tang { color: var(--c-tang); } .foot .mark .c-blue { color: var(--c-sky); }
.foot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); border-block-start: 3px dashed rgba(248,244,233,.25); padding-block-start: var(--sp-5); }
.foot-grid > div { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.foot-grid a, .foot-grid span { color: var(--c-paper); text-decoration: none; font-size: var(--fs-small); font-weight: 700; overflow-wrap: anywhere; }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-mustard); }
.foot-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-weight: 700; font-size: var(--fs-tiny); letter-spacing: .06em; text-transform: uppercase; color: rgba(248,244,233,.75); }
@media (max-width: 700px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Mobil yapışkan çubuk ---------- */
.bar { display: none; }
@media (max-width: 760px) {
  :root { --bar-h: 78px; }
  .bar { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-2); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: var(--c-paper); box-shadow: 0 -6px 0 var(--c-orange-2); }
}

/* ---------- Görünüm animasyonu ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; translate: 0 10px; transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); }
  .js .rv.in { opacity: 1; translate: 0 0; }
}