/* ===================================================================
   BeklemeTV ortak marka katmani (G-0042, kimlik G-0108)

   Uc yuzey (landing, demo sayfasi, sihirbaz) renk, tipografi, bosluk ve
   logoyu buradan alir. Kimlik karari: docs/marka/kimlik.md.

   Kullanim
   - <link rel="stylesheet" href="ortak/marka.css">; marka yazi tipleri
     asagidaki @import ile gelir. Sayfa ayni adresi <link> ile de verebilir
     (erken yukleme), tarayici tek kez indirir.
   - Marka yuzeyi: .porselen (varsayilan) / .gece / .sinyal.
     <html data-tema="acik"> porselen, <html data-tema="koyu"> gece.
   - Icerik paleti (video secenegi): .kil / .lacivert / .adacayi / .krem.
     Render motoruyla ayni: packages/tv/src/tema.tsx PALETLER. Marka
     yuzeyi olarak kullanilmaz.
   - Logo: <a class="marka-logo" href="/" aria-label="BeklemeTV"></a>
     Renk currentColor'dan, boy --logo-boy'dan gelir. Tek yazim logo.svg.
   - Kiraci klasoru tek basina yayinlanacaksa bu dosya ve logo.svg
     kopyalanir ya da gomulur; logo.svg yolu bu dosyaya gorelidir.

   Yazi tipi: Bricolage Grotesque (baslik) + Onest (govde), OFL.
     Playfair Display + Inter yalniz o yazi tipi secilmis icerik icin.
   =================================================================== */
/* yerel woff2 (G-0110): google fonts cagrisi yok; ikisi de OFL, lisans fonts/OFL.txt */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/bricolage-grotesque-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/onest-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Onest";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/onest-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* icerik fontlari (video secenegi: cardo-hanken, playfair-inter); yalniz kullanilan aile indirilir */
@font-face{font-family:"Cardo";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/cardo-400.woff2") format("woff2")}
@font-face{font-family:"Cardo";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/cardo-400-italic.woff2") format("woff2")}
@font-face{font-family:"Cardo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/cardo-700.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/hanken-grotesk-300.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/hanken-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/hanken-grotesk-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/hanken-grotesk-600.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("fonts/playfair-display.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 900;font-display:swap;src:url("fonts/playfair-display-italic.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/inter.woff2") format("woff2")}

:root{
  /* tipografi */
  --baslik:"Bricolage Grotesque","Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --govde:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  /* eski adlar: G-0108 oncesi sayfalar icin takma ad, yeni kodda --baslik/--govde */
  --serif:var(--baslik);
  --sans:var(--govde);
  --serif-2:"Playfair Display",Georgia,serif;
  --sans-2:Inter,Arial,sans-serif;
  /* bosluk: 8pt olcek */
  --u1:8px; --u2:16px; --u3:24px; --u4:32px; --u5:40px; --u6:48px;
  --u8:64px; --u10:80px; --u12:96px; --u16:128px;
  --ritim:clamp(96px, 12vw, 160px);
  --oluk:clamp(24px, 5vw, 64px);
  --en:1320px;
  /* bicim */
  --r1:6px; --r2:12px; --r3:20px;
  --golge:0 24px 64px -32px rgba(18,21,43,.45);
  /* hareket */
  --hizli:180ms; --orta:320ms; --agir:720ms; --palet:600ms;
  --egri:cubic-bezier(.19,1,.32,1);
  --logo-boy:22px;
}

/* --- marka yuzeyleri: docs/marka/kimlik.md ---------------------------- */
:root,.porselen,[data-tema="acik"]{color-scheme:light;
  --bg:#eef1f4;--bg2:#e0e5ec;--fg:#12152b;--fg2:#363b57;--sus:#555a78;--meta:#5f6482;
  --cizgi:#cdd3de;--vurgu:#2b2bd9;--vurgu-yazi:#2b2bd9;--vurgu-ust:#ffffff;--vurgu-hover:#1f1fb8;--yayinda:#2fbf83}
.gece,[data-tema="koyu"]{color-scheme:dark;
  --bg:#15183a;--bg2:#1d2150;--fg:#eef1f4;--fg2:#c9cde6;--sus:#a0a5c9;--meta:#9095bc;
  --cizgi:#2e3366;--vurgu:#b4b9ff;--vurgu-yazi:#b4b9ff;--vurgu-ust:#12152b;--vurgu-hover:#c9ccff}
.sinyal{color-scheme:dark;
  --bg:#2b2bd9;--bg2:#2424c2;--fg:#ffffff;--fg2:#e4e5ff;--sus:#cdd0ff;--meta:#c2c5ff;
  --cizgi:#5050e3;--vurgu:#ffffff;--vurgu-yazi:#ffffff;--vurgu-ust:#2b2bd9;--vurgu-hover:#e4e5ff}

/* --- icerik paletleri (video secenegi): tema.tsx PALETLER ------------- */
.kil{color-scheme:dark;
  --bg:#0c0b0a;--bg2:#141210;--fg:#f5f2ec;--fg2:#d3cdc4;--sus:#a39b91;--meta:#918a80;
  --cizgi:#2b2724;--vurgu:#c47c63;--vurgu-yazi:#c47c63;--vurgu-ust:#140d0a;--vurgu-hover:#d08b72}
.lacivert{color-scheme:dark;
  --bg:#0a0f1c;--bg2:#111a2c;--fg:#f1f3f8;--fg2:#cfd5e2;--sus:#98a1b3;--meta:#828b9e;
  --cizgi:#243047;--vurgu:#c9a961;--vurgu-yazi:#c9a961;--vurgu-ust:#0f1008;--vurgu-hover:#d8ba75}
.adacayi{color-scheme:dark;
  --bg:#141d19;--bg2:#0d1411;--fg:#f1f3ee;--fg2:#cfd6cf;--sus:#97a39a;--meta:#8a958c;
  --cizgi:#243029;--vurgu:#a8c3ad;--vurgu-yazi:#a8c3ad;--vurgu-ust:#0d1411;--vurgu-hover:#bcd3c0}
.krem{color-scheme:light;
  --bg:#f4efe7;--bg2:#ebe4d9;--fg:#1d1a17;--fg2:#3f3a35;--sus:#665f57;--meta:#655e56;
  --cizgi:#dcd3c6;--vurgu:#9c5140;--vurgu-yazi:#8a4331;--vurgu-ust:#fffaf3;--vurgu-hover:#8a4331}
.kanal,.porselen,.gece,.sinyal,.kil,.lacivert,.adacayi,.krem{background:var(--bg);color:var(--fg)}

/* --- taban ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--govde);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-wrap:break-word}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure,figcaption,table{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2{font-family:var(--baslik);font-weight:600;letter-spacing:-.024em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:var(--r1)}
::selection{background:var(--vurgu);color:var(--vurgu-ust)}

.sinir{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:var(--oluk)}
.gizli{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- logo: tek yazim, tek renk ------------------------------------------ */
.marka-logo{display:inline-block;flex:none;height:var(--logo-boy);aspect-ratio:360.9/48.3;background:currentColor;
  -webkit-mask:url("logo.svg") left center/contain no-repeat;mask:url("logo.svg") left center/contain no-repeat}

/* --- kontroller ---------------------------------------------------------- */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;
  min-height:56px;padding:0 var(--u4);border:0;border-radius:var(--r2);cursor:pointer;
  background:var(--vurgu);color:var(--vurgu-ust);font:500 16.5px/1 var(--govde);
  transition:background var(--hizli) linear}
.dugme:hover{background:var(--vurgu-hover)}
.dugme.bos{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--cizgi)}
.dugme.bos:hover{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--fg2)}
.dugme.ufak{min-height:42px;padding:0 var(--u3);font-size:14.5px}
.bag{display:inline-flex;align-items:center;gap:.55em;font:500 16px/1.2 var(--govde);color:var(--fg);
  padding-bottom:6px;box-shadow:inset 0 -1px 0 var(--cizgi);transition:color var(--hizli),box-shadow var(--hizli)}
.bag:hover{color:var(--vurgu-yazi);box-shadow:inset 0 -1px 0 var(--vurgu)}
.ok{width:1.02em;height:1.02em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  flex:none;transition:transform var(--hizli) var(--egri)}
.bag:hover .ok{transform:translateX(4px)}

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