/* Mediagrafi — tasarım sistemi (v3)
   Beyaz zemin; açık gri kart yüzeyleri; sarı üç tonda (dolgu, açık, çok açık) ve antrasit vurgu kartları.
   Hareket: telefon içinde dönen Instagram profilleri, kayan logo ve yazı bantları, kaydırınca beliren kartlar. */

:root {
  --bg: #FFFFFF;
  --fg: #17181B;
  --muted: #696C72;
  --line: #ECEBE7;
  --surface: #F5F5F2;
  --surface-2: #EEEDE8;
  --sari: #F6C11A;
  --sari-2: #FFD95A;
  --sari-soft: #FFF3C9;
  --sari-tint: #FFFBEC;
  --on-sari: #17181B;
  --ant: #26282D;
  --ant-2: #32353B;
  --ant-fg: #F4F4F1;
  --ant-muted: #A6A9AF;
  --t1: #F1EFE9;
  --t2: #E9ECEF;
  --phone: #FFFFFF;
  --rec: #E5372F;
  --ok: #1E9E61;
  --focus: #1F5BFF;
  --shadow: 0 24px 60px -28px rgba(23, 24, 27, .28);

  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.6rem;
  --t-2xl: clamp(1.8rem, 3.8vw, 2.7rem);
  --t-3xl: clamp(2.1rem, 5.4vw, 3.9rem);
  --t-hero: clamp(2.2rem, 4.7vw, 4.1rem);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --maxw: 1240px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-tight { padding-block: clamp(36px, 6vw, 64px); }
.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.prose { max-width: 62ch; color: var(--muted); }
.prose p + p { margin-top: 1em; }
.h-sec { font-size: var(--t-3xl); }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); justify-items: start; }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.sec-head.row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 24px; }
@media (max-width: 640px) { .sec-head.row { grid-template-columns: minmax(0, 1fr); } }
.muted { color: var(--muted); }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: var(--r-pill); background: var(--sari-soft); font-size: var(--t-xs); font-weight: 620; }
.band .pill { background: rgba(246,193,26,.16); color: var(--sari); }

/* ---------- Reveal ---------- */
.anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.anim [data-reveal].in { opacity: 1; transform: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 620; font-size: var(--t-sm); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ink { background: var(--fg); color: var(--bg); }
.btn-ink:hover { background: var(--ant-2); color: var(--ant-fg); }
.btn-sari { background: var(--sari); color: var(--on-sari); }
.btn-sari:hover { background: var(--sari-2); }
.btn-line { border-color: var(--line); background: transparent; }
.btn-line:hover { border-color: var(--fg); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: var(--t-xs); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arr { width: 30px; height: 30px; margin-right: -14px; border-radius: 50%; background: var(--sari); color: var(--on-sari); display: grid; place-items: center; }
.btn .arr svg { width: 16px; height: 16px; }
.link { font-weight: 620; text-decoration: none; background: linear-gradient(var(--sari), var(--sari)) 0 100% / 100% 3px no-repeat; padding-bottom: 2px; transition: background-size .3s var(--ease); }
.link:hover { background-size: 100% 40%; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Header ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-head.scrolled { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 780; font-size: 1.2rem; letter-spacing: -0.04em; }
.brand-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--sari); display: grid; place-items: center; flex: none; }
.brand-dot svg { width: 19px; height: 19px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 540; color: var(--muted); transition: color .15s, background .15s; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.head-cta { margin-left: 8px; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 2px; background: var(--fg); margin: 4px auto; }
@media (max-width: 880px) { .nav, .head-cta { display: none; } .menu-btn { display: block; } }
.sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 24px) var(--gutter-l); display: flex; flex-direction: column; gap: 8px; animation: fadeUp .35s var(--ease); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.sheet nav { display: grid; margin-top: 20px; border-top: 1px solid var(--line); }
.sheet nav a { font-size: 2rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sheet .close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.sheet-foot { margin-top: auto; display: grid; gap: 10px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(20px, 4vw, 48px) clamp(24px, 4vw, 48px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.anim .hero-copy > * { animation: fadeUp .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.rec-pill { display: inline-flex; align-items: center; gap: 12px; padding: 7px 15px 7px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; background: var(--bg); }
.rec-pill .dot { display: inline-flex; align-items: center; gap: 7px; color: var(--rec); }
.rec-pill .dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(1) infinite; }
.h-hero { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.045em; font-weight: 760; }
.h-hero .ln { display: block; }
.rot { position: relative; display: inline-grid; vertical-align: top; isolation: isolate; transition: width .55s var(--ease); white-space: nowrap; max-width: 100%; overflow: hidden; padding-bottom: .04em; }
.rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1em; height: .3em; background: var(--sari); z-index: -1; border-radius: 3px; transform-origin: left; animation: mark 2.8s var(--ease) infinite; }
@keyframes mark { 0% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
.rot > span { justify-self: start; white-space: nowrap; grid-area: 1 / 1; transform: translateY(100%); opacity: 0; transition: transform .6s var(--ease), opacity .45s ease; }
.rot > span.is-in { transform: none; opacity: 1; }
.rot > span.is-out { transform: translateY(-100%); opacity: 0; }
.hero .lead { max-width: 42ch; }
.trusted { display: grid; gap: 10px; margin-top: 8px; width: 100%; }
.trusted small { color: var(--muted); font-size: var(--t-xs); }

/* Stage + phone */
.stage { position: relative; min-height: clamp(470px, 52vw, 620px); display: grid; place-items: center; isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: 0 -10%; z-index: -2; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sari) 26%, transparent) 0 1.5px, transparent 1.5px 16px); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.stage::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--sari-soft) 0%, transparent 68%); z-index: -1; }
.phone { width: clamp(230px, 22vw, 290px); aspect-ratio: 9 / 18.6; border-radius: 44px; background: #111214; padding: 9px; box-shadow: var(--shadow), inset 0 0 0 1.5px #3a3c41; transform: rotate(-5deg); position: relative; }
.anim .phone { animation: phoneIn 1.1s var(--ease) .2s both, floatY 7s ease-in-out 1.3s infinite; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(60px) rotate(4deg); } }
@keyframes floatY { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%); background: #111214; border-radius: 12px; z-index: 3; }
.ph-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--phone); color: var(--fg); padding: 40px 12px 10px; display: flex; flex-direction: column; gap: 9px; font-size: 10px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 11.5px; }
.ph-head { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.ph-head .story-ring { width: 56px; height: 56px; padding: 2px; }
.ph-head .story-av { font-size: 15px; border-width: 2px; }
.ph-stats { display: flex; justify-content: space-around; text-align: center; }
.ph-stats b { display: block; font-size: 12.5px; }
.ph-stats span { color: var(--muted); font-size: 9px; }
.ph-name { font-weight: 700; font-size: 11px; line-height: 1.2; }
.ph-bio { color: var(--muted); font-size: 9.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ph-btns span { background: var(--surface); border-radius: 7px; text-align: center; padding: 5px 0; font-weight: 650; font-size: 9.5px; }
.ph-btns span:first-child { background: var(--sari); color: #17181B; }
.ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-inline: -12px; }
.ph-grid i { aspect-ratio: 9 / 13; background: var(--t1); position: relative; overflow: hidden; }
.ph-grid i:nth-child(4n+2) { background: var(--t2); }
.ph-grid i:nth-child(4n+3) { background: var(--ant); }
.ph-grid i:nth-child(4n) { background: var(--sari-soft); }
.ph-grid i img { width: 100%; height: 100%; object-fit: cover; }
.ph-grid i::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid rgba(127,127,127,.6); }
.ph-body { display: flex; flex-direction: column; gap: 9px; transition: opacity .35s ease, transform .35s var(--ease); }
.ph-body.out { opacity: 0; transform: translateY(8px); }
.float { position: absolute; z-index: 2; background: var(--bg); border-radius: 18px; padding: 11px 14px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; font-size: var(--t-xs); font-weight: 600; line-height: 1.25; border: 1px solid var(--line); }
.float small { display: block; font-weight: 500; color: var(--muted); font-size: .72rem; }
.float .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--sari-soft); display: grid; place-items: center; flex: none; }
.float .ic svg { width: 17px; height: 17px; }
.anim .float { animation: fadeUp .8s var(--ease) both, bob 6s ease-in-out infinite; animation-delay: calc(.7s + var(--i, 0) * .18s), calc(1.5s + var(--i, 0) * .7s); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.float.f1 { top: 9%; right: 2%; }
.float.f2 { left: 0; top: 44%; }
.float.f3 { right: 6%; bottom: 10%; }
.badge-rot { position: absolute; left: 6%; top: 10%; width: 110px; height: 110px; z-index: 2; }
.badge-rot svg.txt { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.badge-rot text { font-size: 9.6px; font-weight: 700; letter-spacing: 2.4px; fill: var(--fg); font-family: var(--font); }
.badge-rot .core { position: absolute; inset: 30px; border-radius: 50%; background: var(--sari); display: grid; place-items: center; color: #17181B; }
.badge-rot .core svg { width: 20px; height: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .stage { min-height: 520px; } .badge-rot { right: 4%; top: 4%; width: 92px; height: 92px; } .badge-rot .core { inset: 26px; } .float.f2 { left: 0; } }
@media (max-width: 420px) { .float.f1 { right: -4px; top: 3%; } .float.f3 { right: 0; bottom: 4%; } .float.f2 { top: 52%; } .float { padding: 9px 11px; } .float .ic { width: 28px; height: 28px; } }

/* Logo marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide var(--dur, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; gap: 28px; padding-right: 28px; align-items: center; }
@keyframes slide { to { transform: translateX(-50%); } }
.logo-chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; text-decoration: none; transition: color .2s; }
.logo-chip:hover { color: var(--fg); }
.logo-chip .story-ring { width: 30px; height: 30px; padding: 1.5px; }
.logo-chip .story-av { font-size: .62rem; border-width: 2px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 34px; border-block: 1px solid var(--line); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { display: grid; gap: 4px; }
.stat b { display: flex; align-items: center; gap: 10px; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: .45em; margin-left: -6px; }
.stat b .up { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sari); display: grid; place-items: center; color: var(--sari); flex: none; }
.stat b .up svg { width: 15px; height: 15px; }
.stat span { color: var(--muted); font-size: var(--t-sm); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bx { position: relative; overflow: hidden; isolation: isolate; background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; text-decoration: none; min-width: 0; transition: transform .4s var(--ease); }
a.bx:hover { transform: translateY(-4px); }
.bx.s3 { grid-column: span 3; } .bx.s2 { grid-column: span 2; } .bx.s4 { grid-column: span 4; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx.s3, .bx.s4 { grid-column: span 2; } .bx.s2 { grid-column: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); } .bx.s2, .bx.s3, .bx.s4 { grid-column: auto; } }
.bx.soft { background: var(--sari-tint); }
.bx.sari { background: var(--sari); color: #17181B; }
.bx.ant { background: var(--ant); color: var(--ant-fg); }
.bx.ant p { color: var(--ant-muted); }
.bx.sari::before, .bx.ant::before { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, transparent 38%, rgba(255,255,255,.22) 38.5% 52%, transparent 52.5% 64%, rgba(255,255,255,.16) 64.5% 78%, transparent 78.5%); }
.bx.ant::before { background: radial-gradient(circle, transparent 38%, rgba(246,193,26,.12) 38.5% 52%, transparent 52.5% 64%, rgba(246,193,26,.08) 64.5% 78%, transparent 78.5%); }
.bx .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--sari-soft); display: grid; place-items: center; flex: none; }
.bx.sari .ic { background: #fff; }
.bx.ant .ic { background: rgba(246,193,26,.16); color: var(--sari); }
.bx .ic svg { width: 21px; height: 21px; }
.bx h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); letter-spacing: -0.025em; }
.bx p { color: var(--muted); font-size: var(--t-sm); max-width: 44ch; }
.bx.sari p { color: rgba(23,24,27,.75); }
.bx .more { margin-top: auto; font-size: var(--t-xs); font-weight: 650; display: inline-flex; gap: 6px; align-items: center; }
.bx .more svg { width: 14px; height: 14px; }
.mini { margin-top: auto; background: var(--bg); border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; font-size: .76rem; box-shadow: 0 1px 0 var(--line); }
.bx.ant .mini { background: var(--ant-2); color: var(--ant-fg); box-shadow: none; }
.mini-h { display: flex; justify-content: space-between; align-items: center; font-weight: 650; }
.mini-h small { color: var(--muted); font-weight: 500; }
.bx.ant .mini-h small { color: var(--ant-muted); }
/* timeline mini */
.tl { position: relative; display: grid; gap: 5px; }
.tl-row { display: flex; gap: 3px; height: 18px; }
.tl-row i { border-radius: 4px; background: var(--t2); }
.tl-row.v i { background: var(--sari-2); }
.tl-row.v i:nth-child(2n) { background: var(--sari); }
.tl-row.c i { background: var(--ant); }
.tl-row.a i { background: color-mix(in srgb, var(--muted) 30%, transparent); height: 10px; align-self: center; }
.tl-head { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--rec); left: 10%; border-radius: 2px; }
.anim .tl-head { animation: head 6s linear infinite; }
@keyframes head { to { left: 96%; } }
.cap-pill { justify-self: center; background: #fff; color: #17181B; border-radius: 6px; padding: 3px 9px; font-weight: 700; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
/* calendar mini */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal span { text-align: center; color: var(--muted); font-size: .66rem; }
.cal i { height: 40px; border-radius: 8px; background: var(--surface); position: relative; font-style: normal; font-size: .62rem; display: grid; place-items: end center; padding-bottom: 4px; font-weight: 650; }
.cal i.on { background: var(--sari-soft); }
.cal i.on::before { content: ""; position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--sari); }
/* task mini */
.task { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bx.ant .task { border-color: rgba(255,255,255,.08); }
.task:last-child { border-bottom: 0; }
.task b { font-weight: 600; }
.task small { display: block; color: var(--muted); }
.bx.ant .task small { color: var(--ant-muted); }
.st { padding: 3px 9px; border-radius: var(--r-pill); font-weight: 650; font-size: .66rem; background: var(--surface); white-space: nowrap; }
.st.y { background: var(--sari); color: #17181B; }
.st.g { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.bx.ant .st { background: rgba(255,255,255,.08); }
.bx.ant .st.y { background: var(--sari); color: #17181B; }
.bx.ant .st.g { background: rgba(30,158,97,.2); color: #6FD3A2; }
/* bars mini */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--sari); height: var(--h); transform-origin: bottom; }
.bars i:nth-child(odd) { background: var(--sari-2); }
.anim .in .bars i { animation: grow 1s var(--ease) both; animation-delay: calc(var(--k) * 60ms + .2s); }
@keyframes grow { from { transform: scaleY(0); } }

/* ---------- Compare (ham / edit) ---------- */
.band { background: var(--ant); color: var(--ant-fg); }
.band .lead, .band .muted { color: var(--ant-muted); }
.band .btn-line { border-color: rgba(255,255,255,.25); color: var(--ant-fg); }
.band .btn-line:hover { border-color: var(--ant-fg); }
.cmp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .cmp { grid-template-columns: minmax(0, 1fr); } }
.cmp-copy { display: grid; gap: 20px; justify-items: start; }
.cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmp-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; color: var(--ant-muted); }
.cmp-list li b { color: var(--ant-fg); font-weight: 650; }
.cmp-list svg { width: 20px; height: 20px; color: var(--sari); margin-top: 3px; }
.cmp-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 2vw, 22px); align-items: center; justify-items: center; }
.cmp-phone { width: 100%; max-width: 250px; display: grid; gap: 12px; justify-items: center; }
.cmp-phone .scr { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #000; border: 6px solid #0d0e10; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.cmp-phone .scr video, .cmp-phone .scr img { width: 100%; height: 100%; object-fit: cover; }
.cmp-phone .tag { font-size: var(--t-xs); font-weight: 650; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: var(--ant-fg); }
.cmp-phone.after .tag { background: var(--sari); color: #17181B; }
.cmp-phone.before .scr { transform: rotate(-3deg); }
.cmp-phone.after .scr { transform: rotate(3deg); }
.cmp-arrow { width: 52px; height: 52px; border-radius: 50%; background: var(--sari); color: #17181B; display: grid; place-items: center; }
.cmp-arrow svg { width: 22px; height: 22px; }
.anim .cmp-arrow { animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.cmp-note { font-size: var(--t-xs); color: var(--ant-muted); }
@media (max-width: 480px) { .cmp-arrow { width: 38px; height: 38px; } .cmp-phone .scr { border-width: 4px; border-radius: 18px; } }

/* ---------- Big type band ---------- */
.bigband { padding-block: clamp(30px, 5vw, 56px); overflow: hidden; }
.bigband .marquee-set { gap: 0; padding-right: 0; }
.bigband .w { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 780; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; padding-right: .25em; }
.bigband .w.o { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.bigband .w.s { color: var(--sari); padding-right: .25em; }
.bigband .rev .marquee-track { animation-direction: reverse; }

/* ---------- Sector tabs ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 5px; background: var(--surface); border-radius: var(--r-pill); width: max-content; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; border: 0; background: none; cursor: pointer; padding: 9px 16px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; color: var(--muted); display: inline-flex; gap: 7px; align-items: baseline; transition: background .25s, color .25s; }
.tab sup { font-size: .68rem; font-weight: 650; }
.tab[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 2px 10px -4px rgba(0,0,0,.15); }
.tab:hover { color: var(--fg); }
.swap { animation: swapIn .55s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateX(28px); } }

/* ---------- Reference cards ---------- */
.ref-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
@media (max-width: 900px) { .ref-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ref-cards { grid-template-columns: minmax(0, 1fr); } }
.ref-card { background: var(--surface); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 12px; text-decoration: none; min-width: 0; transition: background .3s; }
.ref-card:hover { background: var(--surface-2); }
.ref-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--t1); display: block; isolation: isolate; }
.ref-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ref-card:hover .ref-media img { transform: scale(1.05); }
.ref-media.tone-2 { background: var(--t2); } .ref-media.tone-3 { background: var(--ant); color: var(--ant-fg); } .ref-media.tone-4 { background: var(--sari-soft); }
.ph-mark { position: absolute; left: 18px; bottom: -.18em; font-size: clamp(5rem, 11vw, 8rem); font-weight: 800; letter-spacing: -0.07em; line-height: 1; opacity: .1; }
.ref-go { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--sari); color: #17181B; display: grid; place-items: center; transform: scale(.6); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.ref-go svg { width: 22px; height: 22px; }
.ref-card:hover .ref-go, .ref-card:focus-visible .ref-go { transform: none; opacity: 1; }
.ref-body { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 2px 6px 6px; }
.ref-body .story-ring { width: 40px; height: 40px; padding: 2px; }
.ref-body .story-av { font-size: .78rem; border-width: 2px; }
.ref-body b { display: block; font-weight: 650; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-body small { display: block; color: var(--muted); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-n { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.tile-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--sari); color: #17181B; font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.ref-media .tile-badge { top: 12px; right: 12px; }

/* ---------- Tiles ---------- */
.reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 900px) { .reels.wide { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .reels.wide .tile { border-radius: var(--r-md); } }
.tile { position: relative; aspect-ratio: 9 / 16; max-width: 100%; background: var(--t1); color: var(--fg); overflow: hidden; border: 0; padding: 0; cursor: pointer; text-align: left; display: block; isolation: isolate; }
.tile.tone-2 { background: var(--t2); } .tile.tone-3 { background: var(--ant); color: var(--ant-fg); } .tile.tone-4 { background: var(--sari-soft); }
.tile.has-poster { color: #fff; background: #26282D; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .6s var(--ease); }
.tile:hover > img { transform: scale(1.05); }
.tile-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.7) 100%); }
.tile-mark { position: absolute; right: -.06em; bottom: -.2em; font-size: clamp(3.4rem, 7vw, 6rem); font-weight: 800; letter-spacing: -0.07em; line-height: 1; opacity: .08; z-index: -1; pointer-events: none; }
.tile-in { position: absolute; inset: 0; padding: clamp(10px, 1.4vw, 14px); display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.tile-who { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 620; min-width: 0; }
.tile-who b { width: 22px; height: 22px; border-radius: 50%; background: var(--sari); color: #17181B; display: grid; place-items: center; font-size: .6rem; flex: none; }
.tile-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-t { display: block; font-weight: 680; font-size: clamp(.82rem, 1.4vw, .98rem); line-height: 1.15; letter-spacing: -0.02em; }
.tile-meta { display: flex; align-items: center; gap: 6px; font-size: .68rem; opacity: .75; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tile-meta svg { width: 13px; height: 13px; }
.tile-play { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: color-mix(in srgb, currentColor 12%, transparent); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.tile.has-poster .tile-play { background: rgba(255,255,255,.2); backdrop-filter: blur(4px); }
.tile-play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.tile:hover .tile-play { transform: scale(1.12); background: var(--sari); color: #17181B; }

/* ---------- Stories ---------- */
.stories { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 8px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 82px; display: grid; justify-items: center; gap: 8px; text-decoration: none; scroll-snap-align: start; background: none; border: 0; padding: 0; cursor: pointer; }
.story-ring { display: block; width: 76px; height: 76px; border-radius: 50%; padding: 2.5px; background: conic-gradient(from 200deg, var(--sari), #F3A712, var(--sari)); transition: transform .3s var(--ease); flex: none; }
.story:hover .story-ring { transform: scale(1.06); }
.story-ring.off { background: var(--line); }
.story-av { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); background: var(--surface); display: grid; place-items: center; font-weight: 720; font-size: 1.1rem; letter-spacing: -0.03em; overflow: hidden; }
.story-av img { width: 100%; height: 100%; object-fit: cover; }
.story-name { font-size: 0.75rem; line-height: 1.2; text-align: center; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story[aria-pressed="true"] .story-ring { background: var(--fg); }

/* ---------- Process ---------- */
.steps { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.step { background: var(--surface); border-radius: var(--r-md); padding: 18px; scroll-snap-align: start; min-width: 0; display: grid; gap: 6px; align-content: start; }
.step:nth-child(5), .step:nth-child(7) { background: var(--sari-tint); }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.step h4 { font-size: var(--t-lg); margin-top: 6px; }
.step p { font-size: var(--t-xs); color: var(--muted); line-height: 1.45; }

/* ---------- Builder teaser ---------- */
.teaser { position: relative; overflow: hidden; isolation: isolate; background: var(--sari); color: #17181B; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.teaser::before { content: ""; position: absolute; left: -140px; bottom: -180px; width: 460px; height: 460px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, transparent 36%, rgba(255,255,255,.25) 36.5% 50%, transparent 50.5% 62%, rgba(255,255,255,.18) 62.5% 76%, transparent 76.5%); }
.teaser h2 { font-size: var(--t-3xl); max-width: 14ch; }
.teaser p { color: rgba(23,24,27,.75); max-width: 44ch; font-size: var(--t-lg); }
.teaser .btn-ink { background: #17181B; color: #fff; }
.teaser-mock { background: #fff; color: #17181B; border-radius: var(--r-md); padding: 18px; display: grid; gap: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); transform: rotate(2deg); }
.teaser-mock .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEE; font-size: var(--t-sm); }
.teaser-mock .row:last-child { border: 0; }
.teaser-mock .stp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.teaser-mock .stp i { width: 24px; height: 24px; border-radius: 50%; background: #F5F5F2; display: grid; place-items: center; font-style: normal; }
.teaser-mock .sw { width: 36px; height: 20px; border-radius: 20px; background: #17181B; position: relative; }
.teaser-mock .sw::after { content: ""; position: absolute; right: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--sari); }
@media (max-width: 860px) { .teaser { grid-template-columns: minmax(0, 1fr); } .teaser-mock { transform: none; } }

/* ---------- Service list (hizmetler) ---------- */
.svc-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.svc-detail h2 { font-size: var(--t-2xl); }
.svc-detail .kisa { color: var(--muted); font-size: var(--t-lg); margin-top: 10px; }
.svc-detail ul { margin: 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--line); }
.svc-detail li { padding: 11px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.svc-detail li svg { width: 18px; height: 18px; margin-top: 4px; }
.kv { display: grid; gap: 16px; margin: 26px 0 0; }
.kv div { display: grid; gap: 4px; }
.kv dt { font-size: var(--t-xs); color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }
@media (max-width: 860px) { .svc-detail { grid-template-columns: minmax(0, 1fr); } }
.toc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Packages (preset cards) ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .pk-grid { grid-template-columns: minmax(0, 1fr); } }
.pk { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); min-width: 0; transition: transform .4s var(--ease), border-color .3s; }
.pk:hover { transform: translateY(-4px); border-color: var(--fg); }
.pk.on { background: var(--ant); color: var(--ant-fg); border-color: var(--ant); }
.pk.on .pk-kime { color: var(--ant-muted); }
.pk h3 { font-size: 1.9rem; }
.pk-kime { color: var(--muted); font-size: var(--t-sm); }
.pk-nums { display: flex; gap: 26px; padding-block: 14px; border-block: 1px solid var(--line); }
.pk.on .pk-nums { border-color: rgba(255,255,255,.14); }
.pk-nums div { display: grid; }
.pk-nums b { font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pk-nums span { font-size: var(--t-xs); opacity: .7; }
.pk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: var(--t-sm); }
.pk li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.pk li svg { width: 17px; height: 17px; margin-top: 3px; }
.pk.on li svg { color: var(--sari); }
.pk .btn { margin-top: auto; }
.pk-badge { align-self: flex-start; font-size: var(--t-xs); font-weight: 650; background: var(--sari); color: #17181B; padding: 4px 11px; border-radius: var(--r-pill); }

/* ---------- Builder ---------- */
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.builder { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; }
@media (max-width: 980px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.mods { display: grid; gap: 10px; }
.mod { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; transition: background .3s, box-shadow .3s; }
.mod.on { background: var(--sari-tint); box-shadow: inset 0 0 0 1.5px var(--sari); }
.mod h3 { font-size: var(--t-md); letter-spacing: -0.01em; font-weight: 650; }
.mod small { display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.mod .price { font-size: var(--t-xs); color: var(--muted); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--bg); border-radius: var(--r-pill); padding: 4px; border: 1px solid var(--line); }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface); cursor: pointer; font-size: 1.2rem; line-height: 1; display: grid; place-items: center; }
.stepper button:hover { background: var(--sari); color: #17181B; }
.stepper output { min-width: 62px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--t-sm); }
.stepper output small { display: inline; color: var(--muted); font-weight: 500; margin: 0 0 0 3px; font-size: .72rem; }
.switch { position: relative; width: 52px; height: 30px; border-radius: 30px; border: 0; background: var(--line); cursor: pointer; transition: background .25s; flex: none; }
.switch::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.switch[aria-checked="true"] { background: var(--fg); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--sari); }
.opts { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.opt { min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: var(--t-xs); font-weight: 600; }
.opt[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (max-width: 520px) { .mod { grid-template-columns: minmax(0, 1fr); } .mod .stepper, .mod .switch { justify-self: start; } }
.sumcard { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 86px); background: var(--ant); color: var(--ant-fg); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 16px; min-width: 0; overflow: hidden; isolation: isolate; }
.sumcard::before { content: ""; position: absolute; right: -110px; top: -110px; width: 300px; height: 300px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, transparent 38%, rgba(246,193,26,.12) 38.5% 52%, transparent 52.5% 64%, rgba(246,193,26,.08) 64.5% 78%, transparent 78.5%); }
.sum-name { display: grid; gap: 4px; }
.sum-name small { color: var(--ant-muted); font-size: var(--t-xs); }
.sum-name b { font-size: var(--t-xl); letter-spacing: -0.03em; line-height: 1.1; }
.sum-name b.pop { animation: pop .5s var(--ease); }
@keyframes pop { 40% { transform: scale(1.06); color: var(--sari); } }
.mcal { display: grid; gap: 6px; }
.mcal-h { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--ant-muted); }
.mcal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mcal-g span { font-size: .62rem; text-align: center; color: var(--ant-muted); }
.mcal-g i { position: relative; aspect-ratio: 1; border-radius: 7px; background: rgba(255,255,255,.05); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; padding: 2px; }
.mcal-g i.shoot { background: rgba(246,193,26,.22); box-shadow: inset 0 0 0 1.5px var(--sari); }
.mcal-g b { width: 6px; height: 6px; border-radius: 50%; display: block; animation: dot .4s var(--ease) both; }
.mcal-g b.r { background: var(--sari); }
.mcal-g b.p { background: #8FB8FF; }
.mcal-g b.a { background: #F08A5D; }
.mcal-g b.d { background: #CFCFCF; border-radius: 1px; }
@keyframes dot { from { transform: scale(0); } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .7rem; color: var(--ant-muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sum-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.1); }
.sum-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: var(--t-sm); animation: fadeUp .35s var(--ease); }
.sum-lines li span:last-child { color: var(--ant-muted); text-align: right; font-variant-numeric: tabular-nums; }
.sum-total { display: grid; gap: 4px; }
.sum-total b { font-size: 2rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sari); line-height: 1.05; }
.sum-total small { color: var(--ant-muted); font-size: var(--t-xs); }
.sumcard .btn-line { border-color: rgba(255,255,255,.25); color: var(--ant-fg); }

/* ---------- Forms ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: var(--t-sm); font-weight: 540; transition: background .2s, color .2s, border-color .2s; text-decoration: none; display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.field { display: grid; gap: 8px; min-width: 0; }
.field > span, .field legend { font-weight: 620; font-size: var(--t-sm); padding: 0; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.input, textarea.input, select.input { width: 100%; min-height: 50px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); color: var(--fg); padding: 12px 14px; font: inherit; font-size: 16px; }
textarea.input { min-height: 96px; resize: vertical; }
.input:focus { outline: 2px solid var(--fg); outline-offset: 0; border-color: var(--fg); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.err { color: var(--rec); font-size: var(--t-xs); font-weight: 600; }
.note { font-size: var(--t-xs); color: var(--muted); }
.ok-box { background: var(--sari-soft); color: var(--fg); border-radius: var(--r-md); padding: 16px; display: grid; gap: 6px; }
.contact-card { background: var(--surface); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 620; font-size: var(--t-lg); display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.6rem; line-height: 1; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--muted); max-width: 64ch; }

/* ---------- Reference groups page ---------- */
.ref-group { padding-block: 36px; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.ref-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ref-group-head h2 { font-size: var(--t-2xl); }
.ref-group-head span { color: var(--muted); font-size: var(--t-sm); }

/* ---------- Profile ---------- */
.ig-top { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.ig-top a.back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.ig-top a.back:hover { background: var(--surface); }
.ig-top b { font-size: var(--t-lg); letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-cover { position: relative; width: 100%; height: clamp(150px, 26vw, 360px); border-radius: var(--r-lg); overflow: hidden; background: var(--sari-tint); isolation: isolate; }
.p-cover img { width: 100%; height: 100%; object-fit: cover; }
.p-cover.ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sari) 30%, transparent) 0 1.5px, transparent 1.5px 16px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.p-cover .ph-mark { left: auto; right: 24px; opacity: .12; }
.ig-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px clamp(18px, 4vw, 48px); align-items: end; padding-block: 0 18px; margin-top: calc(clamp(86px, 14vw, 140px) / -2.2); padding-inline: clamp(8px, 2vw, 24px); position: relative; }
.ig-av { width: clamp(86px, 14vw, 140px); height: clamp(86px, 14vw, 140px); }
.ig-av .story-ring { width: 100%; height: 100%; padding: 3.5px; }
.ig-av .story-av { font-size: clamp(1.6rem, 3.6vw, 2.6rem); border-width: 5px; }
.ig-name h1 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -0.03em; }
.ig-stats { display: flex; gap: clamp(16px, 4vw, 40px); margin-top: 12px; }
.ig-stats div { display: grid; }
.ig-stats b { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.ig-stats span { font-size: var(--t-xs); color: var(--muted); }
.ig-bio { display: grid; gap: 6px; max-width: 64ch; grid-column: 1 / -1; }
.ig-bio .cat { font-size: var(--t-sm); color: var(--muted); }
.ig-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font-size: var(--t-xs); font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface); text-decoration: none; transition: background .2s; }
a.tag:hover { background: var(--sari); color: #17181B; }
.ig-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ig-actions .btn { flex: 1 1 160px; border-radius: var(--r-sm); min-height: 42px; }
.ig-tabs { display: flex; justify-content: center; gap: 48px; border-top: 1px solid var(--line); margin-top: 22px; }
.ig-tab { display: inline-flex; align-items: center; gap: 8px; padding: 14px 4px; font-size: var(--t-xs); font-weight: 680; letter-spacing: .06em; border: 0; border-top: 2px solid transparent; margin-top: -1px; background: none; cursor: pointer; color: var(--muted); }
.ig-tab[aria-selected="true"] { color: var(--fg); border-top-color: var(--fg); }
.ig-tab svg { width: 14px; height: 14px; }
.empty-reels { display: grid; gap: 14px; justify-items: start; padding: 30px 0; }
.empty-reels .grid-ghost { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; }
.empty-reels .grid-ghost i { aspect-ratio: 9/16; background: var(--surface); }

/* ---------- Statements ---------- */
.statement { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.04em; line-height: 1.03; max-width: 18ch; }
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
@media (max-width: 860px) { .cols-2 { grid-template-columns: minmax(0, 1fr); } }
.rule-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rule-list li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(120px, .5fr) minmax(0, 1fr); gap: 16px; }
.rule-list li b { font-weight: 650; }
.rule-list li span { color: var(--muted); }
@media (max-width: 560px) { .rule-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.wrong { text-decoration: line-through; text-decoration-color: var(--rec); text-decoration-thickness: 2px; color: var(--muted); }
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; border-top: 1px solid rgba(255,255,255,.14); }
.spec-item { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.14); display: grid; gap: 6px; min-width: 0; align-content: start; }
.spec-q { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 780; letter-spacing: -0.05em; line-height: 1; color: var(--sari); font-variant-numeric: tabular-nums; }
.spec-ad { font-weight: 680; font-size: var(--t-lg); }
.spec-not { font-size: var(--t-sm); color: var(--ant-muted); }

/* ---------- CTA ---------- */
.cta-band { padding-block: clamp(40px, 6vw, 88px); }
.cta-panel { background: var(--sari); color: #17181B; border-radius: var(--r-lg); padding: clamp(32px, 6vw, 72px) clamp(22px, 5vw, 64px); display: grid; gap: 26px; position: relative; overflow: hidden; isolation: isolate; }
.cta-panel h2 { font-size: var(--t-3xl); max-width: 17ch; }
.cta-panel .btn-ink { background: #17181B; color: #fff; }
.cta-panel .btn-line { border-color: rgba(23,24,27,.3); color: #17181B; }
.cta-panel::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, transparent 36%, rgba(255,255,255,.25) 36.5% 50%, transparent 50.5% 62%, rgba(255,255,255,.18) 62.5% 76%, transparent 76.5%); }

/* ---------- Footer / dock / flags ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 44px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-sm); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot-grid h4 { font-size: var(--t-sm); margin-bottom: 10px; letter-spacing: 0; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-grid a { text-decoration: none; color: var(--muted); }
.foot-grid a:hover { color: var(--fg); }
.foot-bottom { margin-top: 32px; color: var(--muted); font-size: var(--t-xs); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot-bottom a { color: var(--muted); }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 10px var(--gutter-r) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); display: none; gap: 8px; transform: translateY(110%); transition: transform .4s var(--ease); }
.dock.show { transform: none; }
.dock .btn { flex: 1; }
@media (max-width: 760px) { .dock { display: flex; } body.has-dock { padding-bottom: 78px; } }
.demo-flag { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; background: var(--fg); color: var(--bg); font-size: .72rem; font-weight: 600; padding: 7px 12px; border-radius: var(--r-pill); text-decoration: none; }
@media (max-width: 760px) { .demo-flag { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Player ---------- */
.player { position: fixed; inset: 0; z-index: 80; background: rgba(12,12,14,.95); display: grid; place-items: center; animation: fadeIn .3s ease; padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 20px) var(--gutter-l); }
.player-stage { width: min(420px, 100%); max-height: 100%; display: grid; gap: 12px; transition: width .4s var(--ease); }
.player.wide .player-stage { width: min(860px, 100%); }
.player-frames { display: grid; gap: 12px; }
.player-frames.two { grid-template-columns: 1fr 1fr; }
.player-frame { position: relative; width: min(100%, calc((100vh - 210px) * .5625)); aspect-ratio: 9 / 16; background: #111; border-radius: 16px; overflow: hidden; margin-inline: auto; animation: fadeIn .35s ease; }
.player-frames.two { justify-content: center; grid-template-columns: repeat(2, min(calc(50% - 6px), calc((100vh - 210px) * .5625))); }
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.player-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.pf-label { position: absolute; z-index: 2; top: 10px; left: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; font-weight: 650; padding: 4px 10px; border-radius: var(--r-pill); pointer-events: none; }
.player-frames.two .player-frame:last-child .pf-label { background: var(--sari); color: #17181B; }
.seg { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.08); border-radius: var(--r-pill); justify-self: center; }
.seg button { border: 0; background: none; color: #ddd; padding: 8px 14px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 650; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.seg button svg { width: 14px; height: 14px; }
.seg button[aria-selected="true"] { background: var(--sari); color: #17181B; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; }
.player-bar a { color: #fff; font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.player-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-who b { width: 32px; height: 32px; border-radius: 50%; background: var(--sari); color: #17181B; display: grid; place-items: center; font-size: .75rem; flex: none; }
.player-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-x, .player-nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 3; }
.player-x { top: calc(env(safe-area-inset-top, 0px) + 8px); right: max(12px, env(safe-area-inset-right, 0px)); font-size: 22px; }
.player-nav svg { width: 20px; height: 20px; }
.player-nav.prev { left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; }
.player-nav.next { right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; }
@media (max-width: 560px) { .player-nav { top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); } .player-nav.prev { left: 50%; margin-left: -54px; } .player-nav.next { right: 50%; margin-right: -54px; } .player { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); } .player-frames.two { gap: 6px; } }

/* ---------- Inner page hero ---------- */
.page-hero { padding-block: clamp(40px, 6vw, 88px) clamp(26px, 4vw, 44px); display: grid; gap: 16px; justify-items: start; }
.page-hero h1 { font-size: var(--t-3xl); max-width: 18ch; }
.anim .page-hero > * { animation: fadeUp .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Admin ---------- */
.adm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.adm-dot.off { background: var(--line); }
.adm-main { display: grid; gap: 18px; min-width: 0; }
.adm-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(16px, 2.5vw, 26px); display: grid; gap: 16px; min-width: 0; }
.adm-card h2 { font-size: var(--t-xl); }
.adm-card h3 { font-size: var(--t-lg); }
.drop { position: relative; border: 1.5px dashed var(--line); border-radius: var(--r-md); background: var(--surface); min-height: 150px; display: grid; place-items: center; text-align: center; padding: 16px; cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--sari); background: var(--sari-tint); }
.drop img, .drop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop .drop-t { position: relative; z-index: 1; display: grid; gap: 4px; font-size: var(--t-sm); font-weight: 600; }
.drop .drop-t small { color: var(--muted); font-weight: 500; }
.drop.has .drop-t { background: rgba(0,0,0,.55); color: #fff; padding: 6px 12px; border-radius: var(--r-pill); align-self: end; font-size: var(--t-xs); }
.drop.has .drop-t small { display: none; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.round { width: 120px; height: 120px; min-height: 0; border-radius: 50%; }
.drop.tall { aspect-ratio: 9 / 16; min-height: 0; }
.vrow { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: grid; grid-template-columns: 120px 120px 120px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .vrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vrow .vmeta { grid-column: 1 / -1; } }
.vrow .drop { min-height: 0; padding: 8px; }
.vrow .drop .drop-t { font-size: .72rem; }
.vmeta { display: grid; gap: 10px; min-width: 0; }
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--fg); color: var(--bg); padding: 12px 18px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; animation: fadeUp .35s var(--ease); max-width: calc(100% - 32px); }
.inbox { display: grid; gap: 10px; }
.inbox article { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: grid; gap: 6px; font-size: var(--t-sm); }
.inbox pre { margin: 0; white-space: pre-wrap; font: inherit; color: var(--muted); }

/* ---------- Yönetim paneli (uygulama) ---------- */
body.ap-body { background: #F6F6F3; }
body.ap-body::before { background: #F6F6F3; }
.ap { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ap-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 18px; padding: 22px 14px 18px; background: var(--bg); border-right: 1px solid var(--line); z-index: 40; }
.ap-brand { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 760; font-size: 1.15rem; letter-spacing: -0.03em; text-decoration: none; color: var(--fg); }
.ap-brand small { font-size: .68rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; background: var(--sari-soft); padding: 3px 8px; border-radius: var(--r-pill); }
.ap-logo { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sari); }
.ap-logo svg { width: 20px; height: 20px; }
.ap-nav { display: grid; gap: 2px; overflow: auto; }
.ap-navlink { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 12px; color: var(--muted); text-decoration: none; font-weight: 560; font-size: var(--t-sm); border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; transition: background .2s, color .2s; }
.ap-navlink svg { width: 20px; height: 20px; flex: none; }
.ap-navlink span { flex: 1; }
.ap-navlink em { font-style: normal; font-size: .72rem; font-weight: 650; min-width: 24px; text-align: center; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface); color: var(--fg); }
.ap-navlink:hover { background: var(--surface); color: var(--fg); }
.ap-navlink[aria-current="page"] { background: var(--fg); color: #fff; }
.ap-navlink[aria-current="page"] em { background: var(--sari); color: var(--on-sari); }
.ap-side-foot { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.ap-mode { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 8px; font-size: .75rem; font-weight: 620; color: var(--muted); }
.ap-mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sari); box-shadow: 0 0 0 4px var(--sari-soft); }
.ap-mode.live::before { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.ap-main { min-width: 0; padding: 0 clamp(16px, 3vw, 40px) 80px; }
.ap-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0 16px; background: color-mix(in srgb, #F6F6F3 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ap-menu { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; place-items: center; }
.ap-menu svg { width: 20px; height: 20px; }
.ap-title { flex: 1 1 260px; min-width: 0; }
.ap-title h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.035em; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ap-title p { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }
.ap-crumb { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-sm); font-weight: 560; color: var(--muted); text-decoration: none; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); }
.ap-crumb svg { width: 16px; height: 16px; }
.ap-crumb:hover { color: var(--fg); border-color: var(--fg); }
.ap-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-actions .btn svg { width: 16px; height: 16px; }
.ap-save { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: .78rem; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ap-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ap-save[data-s="saved"] i { background: var(--ok); }
.ap-save[data-s="dirty"] i, .ap-save[data-s="saving"] i { background: var(--sari); animation: blink 1s infinite; }
.ap-save[data-s="error"] { color: var(--rec); border-color: color-mix(in srgb, var(--rec) 40%, transparent); }
.ap-save[data-s="error"] i { background: var(--rec); }
@keyframes blink { 50% { opacity: .3; } }
.ap-demo { background: var(--sari-tint); border: 1px solid var(--sari-soft); border-radius: 14px; padding: 12px 16px; font-size: var(--t-xs); margin-bottom: 18px; }
.ap-pane { display: grid; gap: 18px; animation: fadeUp .45s var(--ease) both; min-width: 0; }
.ap-pane .adm-card { border-radius: 20px; box-shadow: 0 1px 2px rgba(23,24,27,.04); }
.ap-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ap-card-h h3 { font-size: var(--t-lg); }
button.link { border: 0; cursor: pointer; font: inherit; font-weight: 620; color: inherit; padding: 0 0 2px; background-color: transparent; }
.danger { color: var(--rec) !important; }
.btn.danger:hover { border-color: var(--rec); }
.chip.sm { min-height: 32px; padding: 0 12px; font-size: var(--t-xs); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.chip.sm svg { width: 15px; height: 15px; }
.chip small { color: var(--muted); font-size: .72rem; margin-left: 2px; }
.chip[aria-pressed="true"] small { color: var(--sari); }
.input.bad { border-color: var(--rec); outline: 2px solid color-mix(in srgb, var(--rec) 30%, transparent); }
.toast.bad { background: var(--rec); color: #fff; }
.switch.sm { width: 42px; height: 24px; }
.switch.sm::after { width: 16px; height: 16px; left: 4px; top: 4px; }
.switch.sm[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .4; cursor: not-allowed; }
.aseg { display: inline-flex; padding: 4px; gap: 2px; background: var(--surface-2); border-radius: var(--r-pill); }
.aseg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--muted); cursor: pointer; }
.aseg button svg { width: 17px; height: 17px; }
.aseg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.aseg.full { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; width: 100%; }
.aseg.full button { border-radius: 11px; min-height: 42px; }

/* Genel bakış */
.ap-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 24px; background: var(--fg); color: #fff; position: relative; overflow: hidden; }
.ap-quick::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sari) 45%, transparent), transparent 70%); pointer-events: none; }
.ap-quick h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; margin: 10px 0 6px; }
.ap-quick .muted { color: #A6A9AF; font-size: var(--t-sm); }
.ap-quick .pill { background: var(--sari); color: var(--on-sari); }
.ap-quick-f { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: var(--r-pill); padding: 6px 6px 6px 16px; }
.ap-quick-ic svg { width: 22px; height: 22px; color: var(--muted); display: block; }
.ap-quick-f .input { border: 0; min-height: 44px; padding: 0 4px; flex: 1; background: transparent; }
.ap-quick-f .input:focus { outline: 0; }
@media (max-width: 860px) { .ap-quick { grid-template-columns: minmax(0, 1fr); } }
.ap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ap-stat { display: grid; gap: 2px; padding: 18px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.ap-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ap-stat small { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.ap-stat b { font-size: 2.2rem; font-weight: 740; letter-spacing: -0.05em; line-height: 1.1; }
.ap-stat span { font-size: .78rem; color: var(--muted); }
.ap-stat.warn b { color: #C98A00; }
.ap-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ap-two.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.ap-two.wide > :last-child { grid-column: 1 / -1; }
@media (max-width: 980px) { .ap-two, .ap-two.wide { grid-template-columns: minmax(0, 1fr); } }
.ap-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ap-todo a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: inherit; }
.ap-todo a:hover { background: var(--surface); }
.ap-todo .story-ring { width: 40px; height: 40px; padding: 2px; }
.ap-todo .story-av { font-size: .72rem; border-width: 2px; }
.ap-todo b { display: block; font-size: var(--t-sm); font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-todo small { color: var(--muted); font-size: .76rem; }
.ap-todo svg { width: 18px; height: 18px; color: var(--muted); }
.ap-empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 16px; color: var(--muted); font-size: var(--t-sm); }
.ap-empty > svg { width: 34px; height: 34px; padding: 10px; box-sizing: content-box; border-radius: 50%; background: var(--surface); color: var(--fg); }
.ap-empty.wide { grid-column: 1 / -1; background: var(--bg); border: 1px dashed var(--line); border-radius: 20px; padding: 48px 16px; }

/* Araç çubuğu */
.ap-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ap-search { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line); }
.ap-search:focus-within { border-color: var(--fg); }
.ap-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.ap-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: inherit; font-size: var(--t-sm); background: transparent; color: var(--fg); }
select.input.ap-sel { width: auto; flex: 0 1 260px; min-height: 46px; border-radius: var(--r-pill); padding-inline: 16px; font-size: var(--t-sm); max-width: 100%; }
.ap-groups { margin-top: -4px; }
.ap-groups .chip { min-height: 34px; padding: 0 13px; font-size: var(--t-xs); }

/* Firma kartları */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.fc { position: relative; display: grid; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.fc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fc-open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fc-cover { height: 110px; background: var(--surface); }
.fc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-body { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 0 14px; margin-top: -24px; }
.fc-body .story-ring { width: 52px; height: 52px; padding: 2px; background-color: var(--bg); }
.fc-body .story-av { font-size: .8rem; }
.fc-t { padding-bottom: 2px; min-width: 0; }
.fc-t b { display: block; font-weight: 680; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-t small { color: var(--muted); font-size: .75rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc .switch { position: relative; z-index: 2; margin-bottom: 6px; }
.fc-meta { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 14px; }
.fc-meta span { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface); }
.fc-meta .warn { background: var(--sari-soft); }
.fc-meta .soft { color: var(--muted); background: none; border: 1px solid var(--line); }
.ap .t1 { background: linear-gradient(135deg, #F1EFE9, #FFF3C9); } .ap .t2 { background: linear-gradient(135deg, #E9ECEF, #F5F5F2); } .ap .t3 { background: linear-gradient(135deg, #FFF3C9, #F6C11A); } .ap .t4 { background: linear-gradient(135deg, #32353B, #17181B); }

/* Firma detay */
.fhero { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.fhero-cover { height: clamp(110px, 16vw, 170px); background: var(--surface); }
.fhero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fhero-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 0 clamp(16px, 2.5vw, 26px); margin-top: -36px; }
.fhero-row .story-ring { width: 88px; height: 88px; padding: 3px; }
.fhero-row .story-av { font-size: 1.2rem; border-width: 4px; }
.fhero-t h2 { font-size: var(--t-xl); letter-spacing: -0.03em; }
.fhero-t p { font-size: var(--t-xs); }
.fhero-t a { color: inherit; }
.fhero-pub { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); font-weight: 600; padding-bottom: 6px; }
@media (max-width: 640px) { .fhero-row { grid-template-columns: auto minmax(0, 1fr); } .fhero-pub { grid-column: 1 / -1; } .fhero-row .story-ring { width: 72px; height: 72px; } }
.ftabs { display: flex; gap: 4px; padding: 14px clamp(16px, 2.5vw, 26px) 0; border-bottom: 1px solid var(--line); overflow-x: auto; margin-top: 10px; }
.ftabs a { padding: 10px 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: var(--t-sm); border-bottom: 2px solid transparent; white-space: nowrap; }
.ftabs a[aria-current="page"] { color: var(--fg); border-color: var(--fg); }
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-row .note { flex: 1 1 180px; display: grid; gap: 6px; justify-items: start; }

/* Video kartları */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.vgrid.sm { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.vc { position: relative; display: grid; gap: 8px; align-content: start; }
.vc-open { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; border-radius: 16px; }
.vc-media { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--surface); transition: transform .3s var(--ease), box-shadow .3s; }
.vc:hover .vc-media { transform: translateY(-3px); box-shadow: var(--shadow); }
.vc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 10px; }
.vc-ph b { font-size: 1.4rem; font-weight: 760; letter-spacing: -0.04em; }
.vc-ph small { font-size: .7rem; font-weight: 600; opacity: .7; }
.t4 .vc-ph { color: #fff; }
.vc-tags { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.vc-tags em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-size: .66rem; font-weight: 700; padding: 3px 7px; border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--fg); }
.vc-tags em svg { width: 12px; height: 12px; }
.vc-tags .star { background: var(--sari); }
.vc-tags .warn { background: var(--rec); color: #fff; }
.vc-mv { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity .2s; }
.vc:hover .vc-mv, .vc:focus-within .vc-mv { opacity: 1; }
@media (hover: none) { .vc-mv { opacity: 1; } }
.vc-mv button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.vc-mv button:disabled { opacity: .35; cursor: default; }
.vc-mv svg { width: 15px; height: 15px; }
.vc-t b { display: block; font-size: var(--t-xs); font-weight: 650; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vc-t small { display: block; font-size: .72rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-add { aspect-ratio: 9 / 16; display: grid; place-content: center; justify-items: center; gap: 6px; border: 1.5px dashed var(--line); border-radius: 16px; background: var(--bg); cursor: pointer; font: inherit; color: var(--fg); padding: 12px; text-align: center; transition: border-color .2s, background .2s; }
.vc-add svg { width: 26px; height: 26px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--sari); }
.vc-add b { font-size: var(--t-sm); }
.vc-add small { font-size: .72rem; color: var(--muted); }
.vc-add:hover { border-color: var(--sari); background: var(--sari-tint); }

/* Sürükle-bırak eklentileri */
.drop.wide { min-height: 150px; aspect-ratio: auto; }
.drop.slim { min-height: 0; padding: 12px; }
.drop.slim .drop-t { font-size: var(--t-xs); }
.drop.portrait { aspect-ratio: 4 / 5; min-height: 0; }
.drop.vid { min-height: 120px; }
.drop.busy { pointer-events: none; }
.drop-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--sari); transition: width .2s; z-index: 2; }

/* Modal */
.ap-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--bg); color: var(--fg); box-shadow: 0 40px 100px -30px rgba(0,0,0,.45); overflow: hidden; }
.ap-modal.wide { width: min(880px, calc(100vw - 24px)); }
.ap-modal[open] { animation: modalIn .35s var(--ease); }
.ap-modal::backdrop { background: rgba(23, 24, 27, .45); backdrop-filter: blur(4px); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ap-mf { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: calc(100dvh - 32px); }
.ap-mh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--line); }
.ap-mh h2 { font-size: var(--t-lg); letter-spacing: -0.02em; }
.ap-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.ap-x svg { width: 18px; height: 18px; }
.ap-mfoot { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: #FBFBF9; }
.ap-mfoot .sp { flex: 1; }
.vm { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; padding: 22px 24px; overflow: auto; }
@media (max-width: 720px) { .vm { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 18px; } .vm-prev { grid-template-columns: 96px minmax(0, 1fr); align-items: start; } .vm-prev .vm-phone { grid-row: span 3; border-radius: 16px; box-shadow: 0 0 0 4px var(--fg); margin: 4px; width: calc(100% - 8px); } .fm { padding: 18px; } .fm-ph { grid-template-columns: 96px minmax(0,1fr); } .fm-ph .drop.round { width: 96px; height: 96px; } }
.vm-prev { display: grid; gap: 10px; align-content: start; justify-items: start; }
.vm-prev .drop { width: 100%; }
.vm-phone { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 6px var(--fg), 0 20px 40px -18px rgba(0,0,0,.5); margin: 6px 0 8px; }
.vm-phone img, .vm-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-phone > span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); font-size: var(--t-xs); font-weight: 600; text-align: center; padding: 14px; }
.vm-phone > span svg { width: 28px; height: 28px; }
.vm-badge { position: absolute; left: 10px; bottom: 10px; font-style: normal; font-size: .68rem; font-weight: 700; padding: 4px 9px; border-radius: var(--r-pill); background: var(--sari); }
.vm-form { display: grid; gap: 16px; align-content: start; min-width: 0; }
.vm-link { min-height: 50px; resize: vertical; line-height: 1.5; }
.vm-st { min-height: 0; display: grid; gap: 10px; }
.vm-st:empty { display: none; }
.vst { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; }
.vst svg { width: 16px; height: 16px; flex: none; }
.vst.ok { color: var(--ok); } .vst.err { color: var(--rec); } .vst.load, .vst.soft { color: var(--muted); font-weight: 500; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--fg); animation: spin .8s linear infinite; display: inline-block; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.vm-bulk { display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 14px; background: var(--sari-tint); border: 1px solid var(--sari-soft); font-size: var(--t-xs); }
.vm-det { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-size: var(--t-xs); }
.vm-det img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vm-det span { flex: 1 1 180px; }
.vm-more { border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px; }
.vm-more summary { cursor: pointer; padding: 10px 0; font-weight: 620; font-size: var(--t-sm); list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.vm-more summary::-webkit-details-marker { display: none; }
.vm-more summary::before { content: "+"; font-weight: 700; width: 14px; }
.vm-more[open] summary::before { content: "−"; }
.vm-more summary small { color: var(--muted); font-weight: 500; font-size: .76rem; }
.vm-ham { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 12px; }
.vm-ham .drop { padding: 6px; }
.vm-ham .drop-t { font-size: .7rem; }
.vm-vit { display: flex; gap: 12px; align-items: flex-start; }
.vm-vit .switch { margin-top: 2px; }
.vm-vit span { display: grid; gap: 2px; font-size: var(--t-sm); }
.vm-vit small { color: var(--muted); font-size: .76rem; }
.fm { display: grid; gap: 16px; padding: 22px 24px; overflow: auto; }
.fm-ph { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.fm-ph .drop.wide { min-height: 120px; }
.ap-at { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding-left: 14px; }
.ap-at:focus-within { outline: 2px solid var(--fg); border-color: var(--fg); }
.ap-at i { font-style: normal; color: var(--muted); font-weight: 600; }
.ap-at .input { border: 0; padding-left: 4px; }
.ap-at .input:focus { outline: 0; }
.egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Giriş */
.ap-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 80% 0%, var(--sari-soft), transparent 45%), #F6F6F3; }
.ap-login-card { width: min(420px, 100%); display: grid; gap: 16px; padding: 32px; border-radius: 26px; background: var(--bg); box-shadow: var(--shadow); }
.ap-login-card .ap-brand { padding: 0; margin-bottom: 8px; }
.ap-login-card h1 { font-size: var(--t-2xl); letter-spacing: -0.04em; }

@media (max-width: 900px) {
  .ap { grid-template-columns: minmax(0, 1fr); }
  .ap-side { position: fixed; inset: 0 auto 0 0; width: min(290px, 84vw); transform: translateX(-102%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
  .ap-side.open { transform: none; visibility: visible; transition: transform .35s var(--ease); box-shadow: 30px 0 80px -30px rgba(0,0,0,.35); }
  .ap-title p { display: none; }
  .ap-top { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .ap-demo { font-size: .76rem; padding: 10px 12px; }
  .ap-groups { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .ap-groups .chip { flex: none; }
  .ap-menu { display: grid; }
  .ap-title { flex-basis: 0; }
  .ap-actions { order: 5; width: 100%; }
  .ap-save { order: 2; }
}

/* ---------- Ana sayfa (sade) ---------- */
.hero2 { padding-block: clamp(24px, 4vw, 52px) 0; position: relative; }
.hero2-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero2-copy { display: grid; gap: 22px; justify-items: start; }
.hero2 .h-hero { font-size: clamp(2.4rem, 6vw, 4.6rem); text-wrap: balance; }
.hero2 .h-hero .hl { background: linear-gradient(transparent 62%, var(--sari) 62%, var(--sari) 92%, transparent 92%); padding-inline: .05em; }
.hero2 .lead { max-width: 44ch; color: var(--muted); }
.hero2-wall { position: relative; height: clamp(420px, 56vw, 620px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: hidden; border-radius: 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.wall-col { overflow: hidden; }
.wall-track { display: grid; gap: 12px; animation: wallUp var(--dur, 60s) linear infinite; }
.wall-col.rev .wall-track { animation-direction: reverse; }
.hero2-wall:hover .wall-track { animation-play-state: paused; }
.hero2-wall.still .wall-track { animation: none; }
@keyframes wallUp { to { transform: translateY(calc(-50% - 6px)); } }
.wall-item { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--surface); }
.wall-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-item span { position: absolute; left: 8px; bottom: 8px; font-size: .68rem; font-weight: 650; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: var(--r-pill); max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-item.no { background: var(--t1); }
@media (max-width: 880px) {
  .hero2-in { grid-template-columns: minmax(0, 1fr); }
  .hero2-wall { height: 300px; order: -1; border-radius: 20px; }
}
.stories-bar { display: grid; gap: 12px; margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.stories-bar small { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.stories .story-ring { width: 68px; height: 68px; }
.stories .story { width: 76px; }
.feed-filter { margin-bottom: 16px; }
.feed-filter .chip { min-height: 38px; font-size: var(--t-xs); }
.feed-filter .chip small { color: var(--muted); font-size: .72rem; margin-left: 2px; }
.feed-filter .chip[aria-pressed="true"] small { color: var(--sari); }
.feed { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1000px) { .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } }
.feed .tile { border-radius: 10px; }
@media (max-width: 720px) { .feed .tile { border-radius: 4px; } }
.feed-more { display: flex; justify-content: center; margin-top: 22px; }

/* Instagram tarzı video karesi */
.tile .tile-mark { z-index: 0; }
.tile.has-poster .tile-mark { color: rgba(255,255,255,.18); }
.tile > img { z-index: 1; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.45) 100%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.tile.has-poster::after { opacity: 1; }
.tile-who { position: absolute; z-index: 3; top: 8px; left: 8px; right: 8px; color: #fff; font-size: .7rem; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.tile:not(.has-poster) .tile-who { color: inherit; text-shadow: none; }
.tile-who .story-ring { width: 24px; height: 24px; padding: 1.5px; flex: none; }
.tile-who .story-av { border-width: 1.5px; font-size: .5rem; }
.tile-stat { position: absolute; z-index: 3; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 650; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); font-variant-numeric: tabular-nums; }
.tile:not(.has-poster) .tile-stat { color: inherit; text-shadow: none; }
.tile-stat svg { width: 14px; height: 14px; }
.tile .tile-play { z-index: 3; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; }
.tile:hover .tile-play, .tile:focus-visible .tile-play { opacity: 1; transform: none; }
.tile .tile-badge { z-index: 3; }
@media (hover: none) { .tile .tile-play { display: none; } }

/* Referans kartında 3 kapaklık şerit */
.ref-media.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--surface); }
.ref-media.strip .sv { position: relative; overflow: hidden; background: var(--t1); }
.ref-media.strip .sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rot > span.is-in { opacity: 1; transform: none; }
  .marquee { overflow-x: auto; }
}
.ig-head > div:nth-child(2) { padding-top: calc(clamp(86px, 14vw, 140px) / 2.2 + 10px); }

/* ---------- Intro (REC) ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #FFFFFF; display: grid; place-items: center; transition: opacity .6s ease, visibility .6s; }
.intro i { position: absolute; width: 46px; height: 46px; border: 0 solid #17181B; transition: transform .8s var(--ease); }
.intro i:nth-child(1) { top: 24%; left: 30%; border-top-width: 3px; border-left-width: 3px; }
.intro i:nth-child(2) { top: 24%; right: 30%; border-top-width: 3px; border-right-width: 3px; }
.intro i:nth-child(3) { bottom: 24%; left: 30%; border-bottom-width: 3px; border-left-width: 3px; }
.intro i:nth-child(4) { bottom: 24%; right: 30%; border-bottom-width: 3px; border-right-width: 3px; }
@media (max-width: 760px) { .intro i:nth-child(odd) { left: 10%; } .intro i:nth-child(even) { right: 10%; } .intro i:nth-child(-n+2) { top: 32%; } .intro i:nth-child(n+3) { bottom: 32%; } }
.intro-c { display: grid; justify-items: center; gap: 10px; font-variant-numeric: tabular-nums; color: #17181B; }
.intro-rec { display: inline-flex; gap: 8px; align-items: center; color: #E5372F; font-weight: 700; font-size: .85rem; letter-spacing: .08em; }
.intro-rec b { width: 10px; height: 10px; border-radius: 50%; background: #E5372F; animation: blink .6s steps(1) infinite; }
.intro-tc { font-weight: 700; font-size: 1.05rem; }
.intro-logo { font-weight: 800; font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: -0.05em; animation: fadeUp .8s var(--ease) .15s both; }
.intro.out { opacity: 0; visibility: hidden; }
.intro.out i:nth-child(1) { transform: translate(-60vw, -40vh); } .intro.out i:nth-child(2) { transform: translate(60vw, -40vh); }
.intro.out i:nth-child(3) { transform: translate(-60vw, 40vh); } .intro.out i:nth-child(4) { transform: translate(60vw, 40vh); }

/* ---------- Footer wordmark ---------- */
.wordmark { overflow: hidden; display: flex; justify-content: center; font-weight: 800; letter-spacing: -0.06em; line-height: .78; font-size: clamp(4rem, 19.5vw, 17rem); color: var(--fg); padding-top: 28px; user-select: none; }
.wordmark span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.wordmark span:nth-child(4) { color: var(--sari); }
.wordmark.in span { transform: none; }
.foot-links { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.linklike { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Cookie banner ---------- */
.cookie { position: fixed; z-index: 85; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; font-size: var(--t-sm); animation: fadeUp .4s var(--ease); }
.cookie a { color: inherit; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); } }
.quote-c { background: var(--surface); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 18px; align-content: space-between; min-width: 0; }
.quote-c:nth-child(3n+2) { background: var(--sari-tint); }
.quote-c blockquote { margin: 0; font-size: var(--t-lg); line-height: 1.45; letter-spacing: -0.01em; }
.quote-c blockquote::before { content: "“"; display: block; font-size: 3rem; line-height: .6; color: var(--sari); font-weight: 800; margin-bottom: 8px; }
.quote-who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.quote-who .story-ring { width: 44px; height: 44px; padding: 2px; }
.quote-who .story-av { font-size: .8rem; border-width: 2px; }
.quote-who b { display: block; font-weight: 650; }
.quote-who small { color: var(--muted); }

/* ---------- Team (portrait follows the name) ---------- */
.team { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .team { grid-template-columns: minmax(0, 1fr); } .team-photo { display: none; } }
.team-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.team-list li { border-bottom: 1px solid var(--line); }
.team-list button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 4px; border: 0; background: none; cursor: pointer; text-align: left; transition: padding .3s var(--ease); }
.team-list button:hover, .team-list button[aria-current="true"] { padding-left: 14px; }
.team-list .story-ring { width: 44px; height: 44px; padding: 2px; }
.team-list .story-av { font-size: .8rem; border-width: 2px; }
.team-list b { font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.02em; }
.team-list small { color: var(--muted); font-size: var(--t-sm); text-align: right; }
.team-photo { position: sticky; top: 100px; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--sari-tint); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; animation: fadeIn .45s ease; }
.team-photo .ph-mark { opacity: .14; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.c-card { background: var(--surface); border-radius: var(--r-md); padding: 20px; display: grid; gap: 6px; text-decoration: none; min-width: 0; transition: background .2s; }
a.c-card:hover { background: var(--sari-tint); }
.c-card small { color: var(--muted); font-size: var(--t-xs); font-weight: 600; }
.c-card b { font-size: var(--t-lg); font-weight: 650; overflow-wrap: anywhere; }
.c-card.main { background: var(--sari); color: #17181B; }
.c-card.main small { color: rgba(23,24,27,.7); }

/* ---------- Consent checkbox + legal ---------- */
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--t-sm); color: var(--muted); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fg); }
.consent a { color: var(--fg); }
.legal { max-width: 72ch; padding-bottom: 80px; }
.legal h2 { font-size: var(--t-xl); margin: 34px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }

/* ---------- Case study ---------- */
.vaka { margin-top: 8px; background: var(--ant); color: var(--ant-fg); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); }
.vaka-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .vaka-in { grid-template-columns: minmax(0, 1fr); } }
.vaka-copy { display: grid; gap: 16px; justify-items: start; }
.vaka .pill, .band .vaka-copy .pill { background: rgba(246,193,26,.16); color: var(--sari); }
.vaka-h { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; max-width: 26ch; }
.vaka-in.big .vaka-h { font-size: var(--t-3xl); max-width: 18ch; }
.vaka-p { color: var(--ant-muted); max-width: 56ch; }
.vaka .link, .band .link { color: var(--ant-fg); }
.vaka-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--r-md); overflow: hidden; }
.vaka-nums div { background: var(--ant); padding: 18px; display: grid; gap: 4px; }
.vaka-nums b { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 780; letter-spacing: -0.05em; color: var(--sari); line-height: 1; font-variant-numeric: tabular-nums; }
.vaka-nums span { font-size: var(--t-sm); color: var(--ant-muted); }
.vaka-side { display: grid; gap: 14px; }
.vaka-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vaka-tiles .tile { border-radius: 14px; }
.wordmark { line-height: .84; padding-bottom: .02em; }