/* ==========================================================================
   OkulumTV — Tanıtım sitesi (v3)
   Yerleşim fikri: "yayın grafiği" dili. Bölüm etiketleri ekrandaki alt-bant
   etiketleri gibi; tek cesur hamle hero altındaki turuncu kayan bant.
   Bağımlılık yok.
   ========================================================================== */
:root{
  /* renk */
  --ink:#0B1530;
  --ink-2:#3B4966;
  --ink-3:#66738F;
  --paper:#F3F6FB;
  --card:#FFFFFF;
  --line:#DCE3EF;
  --blue:#0B4AA8;          /* logodaki koyu mavi */
  --blue-2:#0A3A86;
  --sky:#2EA3F2;           /* logodaki açık mavi */
  --night:#071733;         /* koyu yayın bölümleri */
  --night-2:#0D2250;
  --night-line:rgba(160,190,240,.16);
  --signal:#FF5A1F;        /* logodaki turuncu */
  --signal-soft:#FFEDE5;
  --onair:#E5281B;
  --ok:#14A35A;

  /* yazı */
  --ff-display:"Archivo", "Arial Narrow", system-ui, sans-serif;
  --ff-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r:14px;
  --shadow:0 18px 40px -26px rgba(11,21,48,.45);
  --shadow-lg:0 50px 90px -40px rgba(7,23,51,.55);
  --wrap:1200px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff-body);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--ff-display);line-height:1.08;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- yazı ölçeği ---------------------------------------------------------- */
.h-xl{font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:800;font-stretch:112%;letter-spacing:-.025em}
.h-lg{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:800;font-stretch:110%;letter-spacing:-.02em}
.h-md{font-size:clamp(1.2rem,1.8vw,1.4rem);font-weight:700;font-stretch:104%;letter-spacing:-.01em}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:62ch}

/* bölüm etiketi = yayın ekranındaki alt-bant etiketi */
.tag{
  display:inline-flex;width:fit-content;max-width:100%;justify-self:start;align-items:stretch;font-family:var(--ff-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border-radius:4px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
}
.tag b{background:var(--blue);color:#fff;padding:.45em .8em;font-weight:700}
.tag span{padding:.45em .9em}
.tag--onair b{background:var(--onair)}
.tag--onair b::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#fff;margin-right:.55em;vertical-align:.05em;animation:tally 1.6s ease-in-out infinite}
@keyframes tally{50%{opacity:.25}}
.dark .tag{background:rgba(255,255,255,.04);border-color:var(--night-line);color:#C6D4EE}
.dark .tag b{background:var(--signal)}

.head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:clamp(32px,5vw,52px);max-width:760px}
.head--center{margin-inline:auto;text-align:center;justify-items:center}
.head--center .tag{justify-self:center}

/* --- butonlar ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;
  padding:15px 24px;border-radius:10px;border:2px solid transparent;
  transition:transform .18s ease,background .18s,border-color .18s,box-shadow .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--signal);color:#fff;box-shadow:0 14px 30px -14px rgba(255,90,31,.8)}
.btn--primary:hover{background:#F04A0F}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--light{background:#fff;color:var(--ink)}
.btn--wa{background:#16A34A;color:#fff}
.btn--wa:hover{background:#12873D}
.btn--sm{padding:10px 16px;font-size:.92rem;border-radius:8px}
.btn svg{width:18px;height:18px;flex:none}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:rgba(243,246,251,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s;
}
.site-header.is-stuck{border-color:var(--line);background:rgba(255,255,255,.92)}
.site-header .wrap{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--ff-display);font-weight:800;font-stretch:112%;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink)}
.brand img{width:46px;height:auto}
.brand b{color:var(--signal);font-weight:800}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink-2);padding:8px 12px;border-radius:8px}
.nav a:hover{color:var(--ink);background:rgba(11,74,168,.07)}
.nav .btn{margin-left:8px;color:#fff}
.nav .btn:hover{background:#F04A0F;color:#fff}
.nav-toggle{display:none;margin-left:auto;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-weight:700;cursor:pointer;color:var(--ink)}

@media (max-width:1020px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);padding:10px clamp(16px,4vw,32px) 18px;
    box-shadow:var(--shadow);display:none;margin:0;
  }
  .nav.is-open{display:flex}
  .nav a{padding:12px 10px}
  .nav .btn{margin:8px 0 0}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(28px,5vw,64px) clamp(36px,5vw,64px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% -10% auto auto;width:70vw;max-width:900px;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(46,163,242,.18),transparent 70%);pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center;position:relative}
.hero__copy{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}
.hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--signal);border-radius:2px;z-index:-1;opacity:.9}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;margin-top:4px;list-style:none}
.hero__proof li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;font-weight:600;color:var(--ink-2);line-height:1.35}
.hero__proof li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}

@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){
  .hero__proof{grid-template-columns:minmax(0,1fr)}
  .hero__actions .btn{flex:1 1 100%}
  .hero h1 em{white-space:normal}
}

/* ==========================================================================
   TV MOCKUP — gerçek oynatıcının yerleşimi
   ========================================================================== */
.tv{position:relative;min-width:0}
.tv__frame{background:#0A1226;border-radius:18px;padding:clamp(6px,1vw,11px);box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.07)}
.tv__stand{width:30%;height:12px;margin:0 auto;background:linear-gradient(180deg,#B8C2D6,#9AA6BE);clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)}
.tv__foot{width:46%;height:6px;margin:0 auto;background:#AFB9CC;border-radius:6px}

.screen{
  --a:#0B4AA8;--a2:#2EA3F2;--band:#FF5A1F;--soft:#EAF2FE;--deep:#0B1F4A;
  position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;
  background:#fff;color:#1A2440;font-family:var(--ff-body);
  font-size:clamp(5.4px,.74vw,9.6px);
  display:flex;flex-direction:column;isolation:isolate;
  transition:--a .4s;
}
.screen__progress{position:absolute;top:0;left:0;height:.35em;background:var(--band);width:0;z-index:9}

.screen__top{flex:none;display:flex;align-items:center;gap:1.1em;padding:.85em 1.2em;border-bottom:.22em solid var(--a);background:#fff}
.s-logo{width:2.8em;height:2.8em;border-radius:.55em;background:var(--a);color:#fff;flex:none;display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:1em;transition:background .4s}
.s-school{font-family:var(--ff-display);font-weight:800;font-size:1.45em;line-height:1.1;letter-spacing:-.01em;color:var(--deep);white-space:nowrap}
.s-school small{display:block;font-family:var(--ff-mono);font-weight:500;font-size:.5em;letter-spacing:.16em;text-transform:uppercase;color:#7A859C;margin-top:.25em}
.s-pill{margin-inline:auto;background:var(--a);color:#fff;border-radius:.35em;font-family:var(--ff-mono);font-weight:700;font-size:.95em;letter-spacing:.22em;padding:.55em 1.3em;white-space:nowrap;transition:background .4s}
.s-pill::before{content:"● ";color:#fff;opacity:.85}
.s-next{text-align:right;flex:none}
.s-next em{display:block;font-style:normal;font-family:var(--ff-mono);font-size:.82em;letter-spacing:.14em;text-transform:uppercase;color:#8691A8;white-space:nowrap}
.s-next em b{color:var(--a);font-weight:700}
.s-dots{display:flex;gap:.35em;justify-content:flex-end;margin-top:.55em}
.s-dots i{display:block;width:1.6em;height:.3em;border-radius:.3em;background:#E1E7F0;transition:background .3s}
.s-dots i.on{background:var(--a)}

.screen__main{flex:1;display:flex;min-height:0}
.stage{flex:1;position:relative;overflow:hidden;min-width:0;background:linear-gradient(165deg,#fff 50%,var(--soft) 100%);transition:background .4s}
.scene{position:absolute;inset:0;padding:5.6em 2.8em 2.6em;opacity:0;transform:translateY(.8em);pointer-events:none;transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;justify-content:center}
.scene.is-active{opacity:1;transform:none}
.scene__label{position:absolute;top:1.9em;left:2.6em;z-index:2;font-family:var(--ff-mono);font-weight:700;font-size:.85em;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--a);padding:.5em .95em;border-radius:.25em;white-space:nowrap;transition:background .4s}
.scene__label::after{content:"";position:absolute;left:calc(100% + 1.2em);top:50%;width:60em;height:.12em;background:var(--a);opacity:.25}
.scene h4{font-size:2.5em;font-weight:800;font-stretch:108%;margin-bottom:.35em;letter-spacing:-.025em;color:var(--deep)}
.scene p{color:#4A5674;font-size:1.2em;max-width:38ch;line-height:1.5}

.grid-rows{display:grid;gap:.5em;width:min(100%,48em)}
.grid-row{display:grid;grid-template-columns:3.8em 1fr 1fr auto;gap:1em;align-items:center;background:#fff;border:.1em solid #E1E7F0;border-radius:.45em;padding:.7em 1em;font-size:1.12em}
.grid-row > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grid-row b{font-family:var(--ff-mono);color:var(--a);font-weight:700}
.grid-row span:nth-child(3){color:#7A859C}
.grid-row i{font-style:normal;font-family:var(--ff-mono);color:#7A859C;font-size:.9em}

.menu-list{list-style:none;counter-reset:y;display:grid;gap:.4em}
.menu-list li{counter-increment:y;display:flex;align-items:baseline;gap:1em;font-family:var(--ff-display);font-weight:800;font-size:2.2em;letter-spacing:-.02em;color:var(--deep)}
.menu-list li::before{content:"0" counter(y);font-family:var(--ff-mono);font-size:.4em;font-weight:700;color:var(--a);letter-spacing:.06em}
.kcal{margin-top:1.1em;font-size:1em;color:#7A859C}

.scene--quote blockquote{margin:0;font-family:var(--ff-display);font-weight:800;font-size:2.55em;line-height:1.2;letter-spacing:-.025em;color:var(--deep);max-width:21ch}
.scene--quote blockquote::before{content:"“";color:var(--a)}
.scene--quote blockquote::after{content:"”";color:var(--a)}
.scene--quote cite{display:flex;align-items:center;gap:.8em;margin-top:1.4em;font-style:normal;font-weight:700;font-size:1.15em;color:#4A5674}
.scene--quote cite::before{content:"";width:2.4em;height:.2em;background:var(--a)}

.scene--birthday{align-items:center;text-align:center}
.avatar{width:3.8em;height:3.8em;border-radius:50%;background:linear-gradient(140deg,var(--a2),var(--a));display:grid;place-items:center;font-family:var(--ff-display);font-weight:800;font-size:1.7em;color:#fff;margin-bottom:.45em}

.count{display:flex;gap:.8em;margin-top:.6em}
.count div{background:#fff;border:.1em solid #E1E7F0;border-radius:.5em;padding:.7em 1.2em;text-align:center;min-width:5em}
.count b{display:block;font-family:var(--ff-mono);font-size:2.3em;line-height:1;color:var(--a)}
.count small{font-size:.85em;color:#7A859C;letter-spacing:.1em;text-transform:uppercase}

.scene--alarm{background:var(--onair);z-index:5}
.scene--alarm .scene__label{background:#fff;color:var(--onair)}
.scene--alarm .scene__label::after{background:#fff;opacity:.45}
.scene--alarm h4{color:#fff;font-size:2.8em}
.scene--alarm p{color:rgba(255,255,255,.92)}
.alarm-strobe{position:absolute;inset:0;background:#fff;opacity:0;animation:strobe 1.1s steps(2) infinite;pointer-events:none}
@keyframes strobe{0%,100%{opacity:0}50%{opacity:.12}}

.side{width:22%;flex:none;background:var(--soft);border-inline-start:.1em solid #E1E7F0;padding:.9em .8em;display:flex;flex-direction:column;gap:.6em;overflow:hidden;font-size:.58em;transition:background .4s}
.s-card{background:#fff;border:.15em solid #E1E7F0;border-radius:.6em;padding:.8em .6em;text-align:center;min-width:0}
.s-card small{display:block;font-size:.82em;color:#7A859C;line-height:1.45}
.s-clock b{font-family:var(--ff-mono);font-weight:700;font-size:2.8em;letter-spacing:-.04em;color:var(--deep);line-height:1}
.s-clock sup{font-family:var(--ff-mono);font-size:1.1em;color:var(--a);margin-inline-start:.15em}
.s-clock small{margin-top:.5em;font-family:var(--ff-mono);font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:#4A5674}
.s-bell .ring{position:relative;display:block;width:min(100%,9em);margin:.2em auto .7em;aspect-ratio:1}
.s-bell svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg,.ring__on{fill:none;stroke-width:8;stroke-linecap:round}
.ring__bg{stroke:#E6ECF4}
.ring__on{stroke:var(--a);transition:stroke-dashoffset .6s ease,stroke .4s}
.s-bell .ring em{position:absolute;inset:0;display:grid;place-content:center;font-style:normal}
.s-bell .ring em b{display:block;font-family:var(--ff-mono);font-weight:700;font-size:2.5em;line-height:1;color:var(--deep)}
.s-bell .ring em small{font-size:.6em;letter-spacing:.1em;text-transform:uppercase;margin-top:.3em}
.s-tag{display:block;background:var(--soft);color:var(--deep);border-radius:.3em;font-weight:800;font-size:1.05em;padding:.4em;margin-bottom:.5em}
.s-event{padding:0;overflow:hidden}
.s-event header{background:var(--a);color:#fff;font-family:var(--ff-mono);font-weight:700;font-size:.78em;letter-spacing:.14em;text-transform:uppercase;padding:.65em;transition:background .4s}
.s-event b{display:block;font-size:1.15em;font-weight:800;margin:.7em .6em .3em;color:var(--deep)}
.s-event small:last-child{padding-bottom:.9em}
.s-weather{text-align:left}
.s-weather__now{display:flex;align-items:center;gap:.5em}
.s-weather__now svg{width:2.4em;height:2.4em;flex:none;fill:none;stroke:var(--a);stroke-width:1.6;stroke-linejoin:round}
.s-weather__now > b{font-family:var(--ff-display);font-size:2.3em;font-weight:800;color:var(--deep)}
.s-weather__now em{font-style:normal;font-size:.9em;font-weight:700;line-height:1.2;min-width:0}
.s-weather__next{display:flex;gap:.4em;margin-top:.7em;border-top:.1em solid #E1E7F0;padding-top:.6em}
.s-weather__next i{flex:1;text-align:center;font-style:normal;font-size:.76em;letter-spacing:.06em;text-transform:uppercase;color:#7A859C}
.s-weather__next i b{display:block;font-family:var(--ff-mono);font-size:1.25em;color:#1A2440}

.bands{flex:none}
.band{display:flex;overflow:hidden}
.band__tag{flex:none;display:grid;place-items:center;font-family:var(--ff-mono);font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:0 1.2em;min-width:7.5em}
.band__vp{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.band__track{display:flex;gap:3.5em;white-space:nowrap;padding:.6em 1.2em;animation:marquee 30s linear infinite}
.band__track--yavas{animation-duration:44s}
.band__track span::before{content:"•";margin-inline-end:3.5em;opacity:.5}
.band--duyuru{background:var(--band);color:#fff;transition:background .4s}
.band--duyuru .band__tag{background:rgba(0,0,0,.18);font-size:.72em}
.band--duyuru .band__track{font-weight:800;font-size:1em}
.band--haber{background:#EDF1F7;color:#4A5674}
.band--haber .band__tag{background:#D7DFEB;font-size:.68em}
.band--haber .band__track{font-size:.82em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (max-width:560px){
  .side{display:none}
  .s-next{display:none}
  .scene{padding:4.6em 2em 2em}
  .scene__label{left:2em;top:1.6em}
}

/* mockup altı kontroller */
.tv__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:20px}
.swatches{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.swatches__list{display:flex;gap:8px}
.swatch{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;background:var(--c)}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.demo-btn{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);color:var(--onair);font-weight:700;font-size:.9rem;padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .18s,border-color .18s}
.demo-btn::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--onair);animation:tally 1.2s ease-in-out infinite}
.demo-btn:hover{background:#FFF1EF;border-color:var(--onair)}
.demo-btn:disabled{opacity:.5;cursor:default}

/* ==========================================================================
   KAYAN BANT (tek cesur hamle)
   ========================================================================== */
.ticker{background:var(--signal);color:#fff;display:flex;overflow:hidden;border-block:3px solid var(--ink);position:relative}
.ticker__tag{flex:none;background:var(--ink);color:#fff;font-family:var(--ff-mono);font-weight:700;font-size:.8rem;letter-spacing:.2em;display:grid;place-items:center;padding:0 clamp(14px,2.4vw,26px);z-index:1}
.ticker__vp{flex:1;min-width:0;overflow:hidden}
.ticker__track{display:flex;gap:56px;white-space:nowrap;padding:16px 0;animation:marquee 46s linear infinite;width:max-content}
.ticker__track span{font-family:var(--ff-display);font-weight:800;font-stretch:115%;font-size:clamp(1.05rem,1.8vw,1.35rem);letter-spacing:-.005em;display:flex;align-items:center;gap:56px}
.ticker__track span::after{content:"";width:10px;height:10px;background:var(--ink);transform:rotate(45deg)}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ==========================================================================
   BÖLÜMLER
   ========================================================================== */
.section{padding-block:clamp(64px,9vw,112px)}
.section--white{background:#fff}
.dark{background:var(--night);color:#E8EEFA}
.dark .lede{color:#A9B8D4}
.dark h2,.dark h3{color:#fff}

/* --- rakamlar ------------------------------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:#fff}
.fact{padding:clamp(22px,3vw,34px) clamp(16px,2.4vw,28px);border-inline-end:1px solid var(--line);display:grid;gap:6px;align-content:start}
.fact:last-child{border-inline-end:0}
.fact b{font-family:var(--ff-display);font-weight:800;font-stretch:115%;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--blue);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fact b small{font-size:.45em;font-weight:700;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.fact span{font-size:.95rem;color:var(--ink-2);font-weight:500;line-height:1.4}
@media (max-width:820px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(2){border-inline-end:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}

/* --- önce / sonra --------------------------------------------------------- */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.compare__col{padding:clamp(24px,3.6vw,44px);display:grid;gap:18px;align-content:start;min-width:0}
.compare__col--old{background:#F7F8FB}
.compare__col--new{background:#fff;border-inline-start:1px solid var(--line)}
.compare__col h3{font-size:1.35rem;font-weight:800;font-stretch:108%}
.compare__k{font-family:var(--ff-mono);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.compare__col--old .compare__k{color:var(--ink-3)}
.compare__col--new .compare__k{color:var(--signal)}
.compare ul{list-style:none;display:grid;gap:14px}
.compare li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:12px;line-height:1.45}
.compare li::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:1px;background-position:center;background-repeat:no-repeat;background-size:12px}
.compare__col--old li{color:var(--ink-3)}
.compare__col--old li::before{background-color:#E6E9F0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366738F' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")}
.compare__col--new li::before{background-color:var(--ok);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")}
.compare__col--new li b{color:var(--ink)}
@media (max-width:760px){
  .compare{grid-template-columns:minmax(0,1fr)}
  .compare__col--new{border-inline-start:0;border-top:1px solid var(--line)}
}

/* --- gerçek ekranlar (koyu) ---------------------------------------------- */
.shots{display:grid;gap:22px}
.shots__tabs{display:flex;flex-wrap:wrap;gap:8px}
.shots__tab{background:transparent;border:1px solid var(--night-line);color:#C6D4EE;font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:8px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.shots__tab:hover{border-color:rgba(255,255,255,.4);color:#fff}
.shots__tab.is-on{background:#fff;color:var(--night);border-color:#fff}
.shots__stage{background:#0A1226;border-radius:16px;padding:clamp(6px,1vw,10px);box-shadow:0 0 0 1px var(--night-line),0 40px 80px -40px #000}
.shot{margin:0}
.shot img{border-radius:8px;width:100%}
.shot figcaption{color:#A9B8D4;font-size:.98rem;padding:16px 8px 6px;max-width:80ch}
.shots__note{display:flex;gap:12px;align-items:flex-start;color:#A9B8D4;font-size:.95rem;max-width:80ch}
.shots__note::before{content:"";flex:none;width:12px;height:12px;margin-top:6px;border-radius:3px;background:#3BB54A;box-shadow:16px 0 0 var(--sky),32px 0 0 var(--signal);margin-right:36px}

/* --- nerede --------------------------------------------------------------- */
.places{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.place{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px;display:grid;gap:12px;align-content:start;min-width:0}
.place__ico{width:44px;height:44px;border-radius:10px;background:var(--paper);display:grid;place-items:center;color:var(--blue)}
.place__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.place h3{font-size:1.15rem;font-weight:800;font-stretch:106%}
.place p{font-size:.96rem;color:var(--ink-2);line-height:1.5}
.place ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.place li{font-family:var(--ff-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:#EAF2FE;border-radius:4px;padding:4px 7px}
@media (max-width:980px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.places{grid-template-columns:minmax(0,1fr)}}

/* --- sahne kataloğu ------------------------------------------------------- */
.catalog{display:grid;gap:clamp(36px,5vw,52px)}
.cat-group{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,3vw,40px);padding-top:28px;border-top:1px solid var(--line)}
.cat-group__head{display:grid;gap:8px;align-content:start}
.cat-group__head h3{font-size:1.3rem;font-weight:800;font-stretch:108%}
.cat-group__head p{font-size:.95rem;color:var(--ink-2)}
.cat-group__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.sc__code{grid-row:span 2;font-family:var(--ff-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--blue);background:#EAF2FE;border-radius:5px;padding:5px 7px;height:max-content;min-width:40px;text-align:center}
.sc--alarm .sc__code{background:var(--onair);color:#fff}
.sc h4{font-family:var(--ff-body);font-size:1.02rem;font-weight:800;line-height:1.3}
.sc p{font-size:.93rem;color:var(--ink-2);line-height:1.5}
@media (max-width:860px){
  .cat-group{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .cat-group__items{grid-template-columns:minmax(0,1fr)}
}

/* --- panel özellikleri ---------------------------------------------------- */
.panel-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.pf{grid-column:span 2;background:rgba(255,255,255,.035);border:1px solid var(--night-line);border-radius:var(--r);padding:24px;display:grid;gap:10px;align-content:start;min-width:0}
.pf h3{font-size:1.12rem;font-weight:800;font-stretch:106%}
.pf p{color:#A9B8D4;font-size:.96rem;line-height:1.55}
.pf--wide{grid-column:span 3;background:linear-gradient(150deg,var(--night-2),rgba(255,255,255,.02));padding:30px}
.pf--wide h3{font-size:1.45rem}
.pf__visual{margin-top:10px}
.pair-code{display:flex;gap:8px}
.pair-code b{width:44px;height:56px;border-radius:8px;background:#fff;color:var(--night);display:grid;place-items:center;font-family:var(--ff-mono);font-size:1.6rem;font-weight:700}
.offline{display:flex;flex-wrap:wrap;align-items:center;gap:12px;white-space:nowrap;font-family:var(--ff-mono);font-size:.82rem;font-weight:700;letter-spacing:.06em}
.offline span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;border:1px solid var(--night-line)}
.offline span::before{content:"";width:9px;height:9px;border-radius:50%}
.offline .off::before{background:#8A96AE}
.offline .on::before{background:#34D27B;box-shadow:0 0 0 4px rgba(52,210,123,.2)}
.offline i{color:#6E7FA3;font-style:normal}
@media (max-width:960px){
  .panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf,.pf--wide{grid-column:span 1}
  .pf--wide{grid-column:span 2}
}
@media (max-width:560px){
  .panel-grid{grid-template-columns:minmax(0,1fr)}
  .pf,.pf--wide{grid-column:span 1}
}

/* --- kurulum adımları ----------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:s;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.step{padding:clamp(24px,3vw,36px);display:grid;gap:12px;align-content:start;border-inline-end:1px solid var(--line);position:relative;min-width:0}
.step:last-child{border-inline-end:0}
.step__no{font-family:var(--ff-mono);font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--signal)}
.step h3{font-size:1.3rem;font-weight:800;font-stretch:108%}
.step p{color:var(--ink-2);font-size:.98rem}
.step__time{margin-top:6px;font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-3)}
@media (max-width:820px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .step{border-inline-end:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
}

/* --- kimler için ---------------------------------------------------------- */
.roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.role{display:grid;gap:12px;align-content:start;padding-top:20px;border-top:3px solid var(--ink);min-width:0}
.role:nth-child(2){border-color:var(--blue)}
.role:nth-child(3){border-color:var(--sky)}
.role:nth-child(4){border-color:var(--signal)}
.role h3{font-size:1.2rem;font-weight:800;font-stretch:106%}
.role p{color:var(--ink-2);font-size:.98rem}
.inst{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,4vw,48px)}
.inst span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.92rem;color:var(--ink-2)}
@media (max-width:900px){.roles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.roles{grid-template-columns:minmax(0,1fr)}}

/* --- paketler ------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.plan--pick{border:2px solid var(--blue);box-shadow:var(--shadow);position:relative}
.plan__badge{position:absolute;top:-13px;left:24px;background:var(--blue);color:#fff;font-family:var(--ff-mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:4px}
.plan__k{font-family:var(--ff-mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.plan h3{font-size:1.6rem;font-weight:800;font-stretch:110%}
.plan .plan__screens{font-family:var(--ff-display);font-weight:800;font-stretch:115%;font-size:2.4rem;line-height:1;color:var(--blue)}
.plan__screens small{font-family:var(--ff-body);font-size:.95rem;font-weight:600;color:var(--ink-3);font-stretch:100%;margin-left:6px}
.plan p{color:var(--ink-2);font-size:.96rem}
.plan ul{list-style:none;display:grid;gap:10px;font-size:.95rem}
.plan li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;line-height:1.4}
.plan li::before{content:"";width:16px;height:16px;border-radius:50%;margin-top:2px;background:#EAF2FE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B4AA8' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.plan .btn{margin-top:auto}
.plans__note{margin-top:22px;color:var(--ink-2);font-size:.95rem;text-align:center}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}.plan--pick{order:-1}}

/* --- güven ---------------------------------------------------------------- */
.trust{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.trust__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;list-style:none}
.trust__list li{display:grid;gap:6px;padding-left:18px;border-left:2px solid var(--line)}
.trust__list b{font-weight:800}
.trust__list span{color:var(--ink-2);font-size:.95rem;line-height:1.5}
@media (max-width:860px){.trust{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.trust__list{grid-template-columns:minmax(0,1fr)}}

/* --- SSS ------------------------------------------------------------------ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,64px);align-items:start}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 2px;font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1530' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 2px 22px;color:var(--ink-2);max-width:68ch}
@media (max-width:860px){.faq-wrap{grid-template-columns:minmax(0,1fr)}}

/* --- iletişim ------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:start}
.contact__copy{display:grid;gap:22px}
.contact__lines{list-style:none;display:grid;gap:12px}
.contact__lines a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:16px 18px;border-radius:12px;border:1px solid var(--night-line);background:rgba(255,255,255,.03);transition:border-color .18s,background .18s}
.contact__lines a:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.contact__lines .ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#fff;flex:none}
.contact__lines .ico svg{width:22px;height:22px}
.contact__lines b{display:block;color:#fff;font-weight:700;word-break:break-word}
.contact__lines small{color:#A9B8D4;font-size:.86rem}
.promise{list-style:none;display:grid;gap:10px;color:#C6D4EE;font-size:.96rem}
.promise li{display:flex;gap:10px;align-items:flex-start}
.promise li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--signal);transform:rotate(45deg)}

.form{background:#fff;color:var(--ink);border-radius:18px;padding:clamp(22px,3.4vw,36px);box-shadow:0 40px 80px -40px #000}
.form h3{color:var(--ink);font-size:1.5rem;font-weight:800;font-stretch:108%}
.form__sub{font-size:.95rem;color:var(--ink-2);margin:6px 0 22px}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-weight:700;font-size:.88rem}
.field label span{color:var(--onair)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s,background .15s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.form__note{font-size:.85rem;color:var(--ink-3)}
.form__msg{margin-top:14px;font-size:.95rem;font-weight:600;border-radius:10px}
.form__msg.ok{background:#E6F7EE;color:#0E7A42;padding:12px 14px}
.form__msg.err{background:#FDECEA;color:#B42318;padding:12px 14px}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.form__grid{grid-template-columns:minmax(0,1fr)}.form__foot .btn{width:100%}}

/* --- footer --------------------------------------------------------------- */
.site-footer{background:#040E22;color:#A9B8D4;padding-block:56px 30px;font-size:.95rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.6fr));gap:32px}
.site-footer .brand{color:#fff}
.site-footer p{margin-top:14px;max-width:44ch}
.site-footer h4{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#6E7FA3;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a{text-decoration:none;color:#C6D4EE}
.site-footer a:hover{color:#fff}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid rgba(160,190,240,.12);margin-top:40px;padding-top:22px;font-size:.86rem;color:#6E7FA3}
@media (max-width:720px){.footer__grid{grid-template-columns:minmax(0,1fr)}}

/* --- mobil sabit CTA ------------------------------------------------------ */
.mbar{display:none}
@media (max-width:720px){
  .mbar{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);
    border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(11,21,48,.5);
    transform:translateY(110%);transition:transform .25s ease;
  }
  .mbar.is-on{transform:none}
  .mbar .btn{padding:13px 10px;font-size:.95rem}
  .site-footer{padding-bottom:110px}
}

/* --- giriş animasyonu (görünür halden başlar) ---------------------------- */
.reveal{transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-pending{opacity:0;transform:translateY(18px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* yan sütun başlıkları biraz daha küçük */
.trust .h-lg,.faq-wrap .h-lg{font-size:clamp(1.75rem,2.8vw,2.4rem)}