/* =============================================================================
   DİJİTAL KURDISTAN NEWS — Editorial design system
   Built on the Pezkuwi / Kurdish brandbook: kesk green, sor red, zer gold,
   Newroz flame, deep-navy frosted surfaces. Dark, premium, Al-Jazeera-grade.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@500;700&display=swap');

/* ── RTL (ku Soranî · fa · ar): Arabic-script fonts + direction ───────────── */
[dir="rtl"] {
  --sans: 'Noto Sans Arabic', 'Plus Jakarta Sans', sans-serif;
  --display: 'Noto Kufi Arabic', 'Noto Sans Arabic', 'Space Grotesk', sans-serif;
  --mono: 'Noto Sans Arabic', 'JetBrains Mono', monospace;
}
[dir="rtl"] .ticker__item { flex-direction: row-reverse; }
[dir="rtl"] .ticker__item time { margin-inline: 0 14px; }
[dir="rtl"] .meta, [dir="rtl"] .byline { flex-direction: row-reverse; }
[dir="rtl"] .crumbs { flex-direction: row-reverse; }
[dir="rtl"] .lang { direction: ltr; }

:root{
  /* Kurdish national palette */
  --kesk:#009639; --kesk-bright:#2FC864; --kesk-700:#017A2F; --kesk-900:#013D1A;
  --sor:#E2231A;  --sor-bright:#FF4D4D;  --sor-700:#A30E1F;
  --zer:#FDB813;  --zer-bright:#FFD600;  --zer-600:#D9A400;
  --fire:#FF7A00; --info:#2AB0F2;
  --tint:153,158,199;

  /* Backgrounds — deep navy, never flat black */
  --bg:#070A1C; --bg-2:#05081C; --bg-3:#0B0F26; --bg-band:#04060F;
  --grad-screen:radial-gradient(140% 90% at 50% -8%, rgba(0,150,57,.10) 0%, rgba(7,10,28,0) 55%);

  /* Frosted surfaces */
  --surface:rgba(var(--tint),.055);
  --surface-2:rgba(var(--tint),.10);
  --surface-3:rgba(var(--tint),.16);
  --border:rgba(var(--tint),.14);
  --border-soft:rgba(var(--tint),.08);
  --border-strong:rgba(var(--tint),.26);

  /* Ink */
  --ink:rgba(255,255,255,.93);
  --ink-2:rgba(255,255,255,.64);
  /* .42 measured 4.02:1 against the page — under the 4.5:1 floor at the
     12.5px this token is used at, which is why the footer's Privacy and
     Terms links read as decoration and were reported as missing. .50 is
     5.3:1 and still reads as the tertiary tone. */
  --ink-3:rgba(255,255,255,.50);
  --ink-4:rgba(255,255,255,.28);

  /* Type */
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --serif:'Noto Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --flame-h:linear-gradient(90deg,#009639 0%,#FF7A00 42%,#FDB813 72%,#E2231A 100%);
  --flame-v:linear-gradient(0deg,#1B5E20 0%,#FF6F00 32%,#FFD600 62%,#D32F2F 100%);

  --container:1320px;
  --gutter:clamp(16px,4vw,40px);
  --shadow-card:0 10px 30px rgba(0,0,0,.40);
  --shadow-pop:0 20px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); background-image:var(--grad-screen);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
::selection{background:rgba(0,150,57,.32); color:#fff;}

.wrap{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter);}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.mono{font-family:var(--mono);}

/* ---------- Utility top bar ------------------------------------------------ */
.util{background:var(--bg-band); border-bottom:1px solid var(--border-soft); font-size:12.5px;}
.util__row{display:flex; align-items:center; gap:18px; height:38px; color:var(--ink-3);}
.util__date{font-family:var(--mono); letter-spacing:.01em; text-transform:uppercase; font-size:11.5px;}
.util__spacer{flex:1;}
.util__link{color:var(--ink-3); transition:color .15s var(--ease); white-space:nowrap;}
.util__link:hover{color:var(--ink);}
.util__sep{width:1px; height:14px; background:var(--border); }

.lang{display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:3px;}
.lang button{
  border:0; background:transparent; color:var(--ink-2); font-weight:700;
  font-size:11px; letter-spacing:.06em; padding:3px 10px; border-radius:999px;
  transition:all .15s var(--ease);
}
.lang button.is-active{background:var(--kesk-700); color:#fff; box-shadow:0 2px 10px rgba(0,150,57,.4);}
.lang button:not(.is-active):hover{color:var(--ink);}

/* ---------- Masthead ------------------------------------------------------- */
.masthead{position:relative;}
.masthead::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--flame-h); opacity:.9;}
.masthead__row{display:flex; align-items:center; gap:28px; padding-block:22px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand__mark{
  width:52px; height:52px; flex:none; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #11152E, #05081C 78%);
  border:1px solid var(--border-strong); display:grid; place-items:center;
  box-shadow:0 0 34px rgba(253,184,19,.18), inset 0 0 18px rgba(0,0,0,.6);
}
.brand__mark img{width:30px; height:30px; filter:drop-shadow(0 2px 8px rgba(255,122,0,.5));}
.brand__name{line-height:1;}
.brand__kicker{font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--zer); text-transform:uppercase; display:block; margin-bottom:5px;}
.brand__word{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.02em; color:#fff; display:block;}
.brand__word b{color:var(--kesk-bright); font-weight:700;}

.masthead__spacer{flex:1;}
.btn-sub{
  display:inline-flex; align-items:center; gap:8px; background:var(--kesk-700); color:#fff;
  font-weight:700; font-size:13.5px; padding:11px 20px; border:0; border-radius:999px;
  box-shadow:0 8px 24px rgba(0,150,57,.34); transition:all .15s var(--ease); white-space:nowrap;
}
.btn-sub:hover{background:var(--kesk-bright); transform:translateY(-1px);}
.btn-sub:active{transform:scale(.98);}
.search-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-2); display:grid; place-items:center; transition:all .15s var(--ease);
}
.search-btn:hover{color:#fff; border-color:var(--border-strong); background:var(--surface-2);}

/* ---------- Primary nav ---------------------------------------------------- */
.nav{position:sticky; top:0; z-index:60; background:rgba(5,8,28,.86); backdrop-filter:blur(16px) saturate(140%); border-block:1px solid var(--border); transition:box-shadow .2s var(--ease);}
.nav.is-stuck{box-shadow:0 12px 30px rgba(0,0,0,.5);}
.nav__row{display:flex; align-items:center; gap:4px; height:54px; overflow-x:auto; scrollbar-width:none;}
.nav__row::-webkit-scrollbar{display:none;}
.nav__brand{display:none; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em; padding-right:18px; margin-right:8px; border-right:1px solid var(--border); white-space:nowrap;}
.nav__brand img{width:32px; height:32px; border-radius:8px;}
.nav.is-stuck .nav__brand{display:flex;}
.nav a{
  position:relative; padding:8px 14px; font-weight:600; font-size:14px; color:var(--ink-2);
  white-space:nowrap; border-radius:8px; transition:color .15s var(--ease);
}
.nav a::after{content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--kesk-bright); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease);}
.nav a:hover{color:#fff;}
.nav a:hover::after{transform:scaleX(1);}
.nav a.is-active{color:#fff;}
.nav a.is-active::after{transform:scaleX(1);}
.nav__more{margin-left:auto;}

/* ---------- Breaking ticker ------------------------------------------------ */
.ticker{display:flex; align-items:stretch; background:var(--bg-band); border-bottom:1px solid var(--border-soft); height:46px; overflow:hidden;}
.ticker__tag{display:inline-flex; align-items:center; gap:8px; background:var(--sor); color:#fff; font-weight:800; font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding-inline:18px; flex:none; position:relative; white-space:nowrap;}
.ticker__tag::after{content:""; position:absolute; right:-8px; top:0; bottom:0; width:0; border-style:solid; border-width:23px 0 23px 8px; border-color:transparent transparent transparent var(--sor);}
.live-dot{width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}70%{box-shadow:0 0 0 7px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}}
.ticker__view{flex:1; overflow:hidden; position:relative;}
.ticker__items{display:flex; flex-direction:column; transition:transform .55s var(--ease-out);}
.ticker__item{height:46px; display:flex; align-items:center; gap:14px; padding-left:22px; font-size:14px; color:var(--ink);}
.ticker__item time{font-family:var(--mono); font-size:11.5px; color:var(--zer); flex:none;}
.ticker__item span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ticker__nav{display:flex; align-items:center; border-left:1px solid var(--border-soft);}
.ticker__nav button{width:42px; height:46px; background:transparent; border:0; color:var(--ink-3); display:grid; place-items:center; transition:color .15s var(--ease);}
.ticker__nav button:hover{color:#fff;}

/* ---------- Photo wells (duotone placeholder system) ----------------------- */
.photo{position:relative; overflow:hidden; background:#0A0E22; border-radius:10px; isolation:isolate; box-shadow:inset 0 -40px 60px -40px rgba(0,0,0,.35);}
.photo::before{content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(95% 75% at 30% 8%, rgba(255,255,255,.16), transparent 52%),
    var(--photo-grad, linear-gradient(145deg,#15583A 0%,#0E1E52 52%,#2A1014 100%));
}
.photo::after{content:""; position:absolute; inset:0; z-index:1; opacity:.26; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.photo .ridge{position:absolute; left:0; right:0; bottom:0; height:58%; z-index:1; opacity:.92;
  background:linear-gradient(180deg, rgba(6,9,22,.2), rgba(4,6,15,.96));
  clip-path:polygon(0 64%,12% 40%,24% 58%,38% 26%,52% 52%,66% 22%,80% 48%,92% 30%,100% 44%,100% 100%,0 100%);
}
.photo .ridge::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ridge-rim, rgba(0,150,57,.4)) 0 1.5px, transparent 2px);
  clip-path:inherit; opacity:.7;}
.photo .sun{position:absolute; top:16%; left:60%; width:54px; height:54px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(255,238,170,1), rgba(253,184,19,.7) 38%, rgba(255,122,0,.22) 62%, transparent 74%);
  filter:blur(.5px); opacity:.92;}
.photo--green{--photo-grad:linear-gradient(145deg,#16633E 0%,#0D1E54 54%,#073A1F 100%); --ridge-rim:rgba(47,200,100,.5);}
.photo--red{--photo-grad:linear-gradient(145deg,#5A141E 0%,#0E1A4A 55%,#2A0C12 100%); --ridge-rim:rgba(229,52,80,.5);}
.photo--gold{--photo-grad:linear-gradient(145deg,#5A4310 0%,#0E1A4A 60%,#2A1A06 100%); --ridge-rim:rgba(253,184,19,.55);}
.photo--blue{--photo-grad:linear-gradient(145deg,#0E4366 0%,#0C1748 58%,#06203A 100%); --ridge-rim:rgba(42,176,242,.5);}
.photo--fire{--photo-grad:linear-gradient(145deg,#5E2E08 0%,#0E1A4A 58%,#2E1606 100%); --ridge-rim:rgba(255,122,0,.55);}
.photo--night{--photo-grad:linear-gradient(145deg,#1A2150 0%,#0C1130 55%,#070A1C 100%); --ridge-rim:rgba(153,158,199,.4);}
.photo__live{position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center; gap:6px; background:var(--sor); color:#fff; font-weight:800; font-size:10.5px; letter-spacing:.06em; padding:4px 9px; border-radius:5px;}
.photo__dur{position:absolute; bottom:12px; right:12px; z-index:2; font-family:var(--mono); font-size:11px; background:rgba(4,6,15,.7); border:1px solid var(--border); padding:3px 7px; border-radius:5px; color:#fff;}
.photo__play{position:absolute; inset:0; display:grid; place-items:center; z-index:2;}
.photo__play span{width:54px; height:54px; border-radius:50%; background:rgba(4,6,15,.5); border:1.5px solid rgba(255,255,255,.7); display:grid; place-items:center; backdrop-filter:blur(4px); transition:transform .2s var(--ease);}
a:hover .photo__play span{transform:scale(1.08); background:var(--kesk);}

/* ---------- Kicker / meta -------------------------------------------------- */
.kicker{font-family:var(--sans); font-weight:800; font-size:11.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--kesk-bright); display:inline-flex; align-items:center; gap:7px;}
.kicker::before{content:""; width:14px; height:2px; background:currentColor; border-radius:2px;}
.kicker--red{color:var(--sor-bright);} .kicker--gold{color:var(--zer);} .kicker--blue{color:var(--info);} .kicker--fire{color:var(--fire);}
.meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.meta .dot{width:3px; height:3px; border-radius:50%; background:var(--ink-4);}

/* ---------- Article cards -------------------------------------------------- */
.card{display:flex; flex-direction:column; gap:12px;}
.card a.card__media{display:block;}
.card .photo{aspect-ratio:16/10;}
.card__title{font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.18; color:var(--ink); transition:color .15s var(--ease), transform .15s var(--ease);}
.card__title:hover{color:#fff;}
a:hover .card__title{color:#fff; text-decoration:underline; text-decoration-color:var(--kesk-bright); text-underline-offset:4px; text-decoration-thickness:2px;}
.card__dek{font-size:14.5px; color:var(--ink-2); line-height:1.5;}
.card .photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out);}
.card a.card__media:hover .photo img{transform:scale(1.05);}

.card--lg .card__title{font-size:clamp(28px,3vw,40px); line-height:1.08;}
.card--md .card__title{font-size:20px;}
.card--sm .card__title{font-size:16.5px; font-weight:600;}

/* horizontal list row */
.row{display:grid; grid-template-columns:118px 1fr; gap:14px; align-items:start; padding-block:18px; border-top:1px solid var(--border-soft);}
.row:first-child{border-top:0;}
.row .photo{aspect-ratio:1/1; border-radius:8px;}
.row .card__title{font-size:16px;}

/* ---------- Section header ------------------------------------------------- */
.shead{display:flex; align-items:center; gap:16px; margin:0 0 22px;}
.shead h2{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0; color:#fff; display:inline-flex; align-items:center; gap:11px;}
.shead h2::before{content:""; width:4px; height:22px; border-radius:3px; background:var(--accent,var(--kesk));}
.shead .line{flex:1; height:1px; background:var(--border);}
.shead a{font-size:13px; font-weight:700; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; transition:color .15s var(--ease); white-space:nowrap;}
.shead a:hover{color:var(--kesk-bright);}
.sec{padding-block:clamp(34px,5vw,56px);}
.sec--band{background:var(--bg-2); border-block:1px solid var(--border-soft);}

/* ---------- Hero ----------------------------------------------------------- */
.hero{display:grid; grid-template-columns:1.55fr 1fr; gap:34px; padding-top:34px;}
.hero__lead .photo{aspect-ratio:16/9; border-radius:12px; margin-bottom:20px;}
.hero__lead .card__dek{font-size:17px; max-width:62ch;}
.hero__side{display:flex; flex-direction:column;}

/* ════════════ AD SLOTS — placeholder inventory; drop real tags into .ad ════════════ */
.adslot{margin-inline:auto;}
.adslot__label{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); text-align:center; margin-bottom:6px;}
.ad{position:relative; display:block; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,var(--surface-2),var(--surface)); text-decoration:none; color:var(--ink); transition:border-color .2s var(--ease),transform .2s var(--ease);}
.ad:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.ad__accent{position:absolute; top:0; bottom:0; left:0; width:3px; background:var(--ad-accent,var(--kesk));}
.ad__in{display:block; padding:16px 18px 16px 22px;}
.ad__kicker{display:block; font-family:var(--sans); font-weight:800; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ad-accent,var(--kesk-bright)); margin-bottom:7px;}
.ad__title{display:block; font-family:var(--display); font-weight:700; font-size:18px; line-height:1.2; margin-bottom:6px;}
.ad__desc{display:block; font-family:var(--sans); font-size:13px; color:var(--ink-2); margin-bottom:12px;}
.ad__cta{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:13px; color:var(--ad-accent,var(--kesk-bright));}
.ad__cta::after{content:"→"; transition:transform .2s var(--ease);}
.ad:hover .ad__cta::after{transform:translateX(3px);}
/* Top banner — sits above the masthead, full bleed. Unsold inventory, so it
   is drawn as an open invitation (dashed rule) rather than a live creative. */
.adslot--top{width:100%; padding:8px var(--gutter) 10px; background:var(--surface); border-bottom:1px solid var(--border);}
.adslot--top .adslot__label{margin-bottom:5px;}
.adslot--top .ad{max-width:var(--container); margin-inline:auto; border-style:dashed; border-color:var(--border-strong); background:linear-gradient(110deg,var(--surface-2),var(--surface)); border-radius:12px;}
.adslot--top .ad__accent{width:0;}
.adslot--top .ad__in{display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 22px; min-height:74px; text-align:center;}
.adslot--top .ad__kicker{margin:0;}
.adslot--top .ad__title{margin:0; font-size:18px;}
.adslot--top .ad__desc{margin:0;}
.adslot--top .ad__cta{white-space:nowrap;}
@media (max-width:900px){
  .adslot--top .ad__desc{display:none;}
}
@media (max-width:680px){
  .adslot--top .ad__in{flex-wrap:wrap; gap:6px 12px; padding:12px 16px; min-height:0;}
  .adslot--top .ad__title{flex-basis:100%; font-size:15px;}
}
/* Sponsor slide — the creative occupies exactly the same 16/9 box as an
   editorial slide's photo, so the shared control rail lands on its edge too. */
.deck__slide--ad{display:flex; align-items:flex-start;}
.adslot--deck{position:relative; width:100%;}
/* Label floats inside the creative so the panel starts flush with the photo
   box on the neighbouring slides — otherwise the control rail sits off-edge. */
.adslot--deck .adslot__label{position:absolute; top:10px; inset-inline-start:16px; margin:0; text-align:start; z-index:2;}
.adslot--deck .ad{aspect-ratio:16/9; display:flex; align-items:center; border-style:dashed; border-radius:12px;}
/* Clear the overlaid arrows on both sides. */
.adslot--deck .ad__in{width:100%; padding:34px 68px;}
.adslot--deck .ad__title{font-size:clamp(20px,2vw,26px);}
.adslot--deck .ad__desc{font-size:15px;}

/* ── Hero deck — swipeable headline carousel ─────────────────────────────────
   One slide per viewport, CSS scroll-snap so touch swipe needs no JS. Sponsor
   slides are ordinary ad slots dealt into the same track. */
.deck{position:relative; min-width:0;}
.deck__track{
  display:flex; gap:26px; overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.deck__track::-webkit-scrollbar{display:none;}
.deck__track:focus-visible{outline:2px solid var(--kesk-bright); outline-offset:6px; border-radius:14px;}
.deck__slide{flex:0 0 100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always;}
.deck__slide .card__media,.deck__slide .photo{border-radius:12px;}
.deck__slide .photo{aspect-ratio:16/9;}
/* Clamp so every slide is the same height: the track takes the tallest one,
   and a long dek would otherwise leave a void on the shorter slides. */
/* The sheet has no global heading reset, so the UA margins on h2/p would open
   a ~70px hole between the headline and the dek. */
.deck__slide .card__title,.deck__slide .card__dek{margin:0;}
.deck__title{
  font-size:clamp(24px,2.7vw,36px);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.deck__slide .card__dek{
  font-size:16px; max-width:62ch;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Control rail is pinned over the media box (same 16/9 as the slide image),
   so the arrows sit on the photo at every width without magic offsets. */
.deck__rail{position:absolute; top:0; left:0; right:0; aspect-ratio:16/9; pointer-events:none;}
.deck__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  pointer-events:auto; display:grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--border-strong); border-radius:50%; cursor:pointer;
  color:var(--ink); background:rgba(5,8,28,.62); backdrop-filter:blur(10px) saturate(1.2);
  transition:background .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.deck__nav:hover:not(:disabled){background:var(--kesk); border-color:var(--kesk); color:#fff;}
.deck__nav:disabled{opacity:.28; cursor:default;}
/* logical inset so "previous" stays on the reading-start side in RTL */
.deck__nav--prev{inset-inline-start:12px;}
.deck__nav--next{inset-inline-end:12px;}
/* Bottom inline-end corner: clear of the headline below and of the arrows,
   and readable over a photo, a colour well or a sponsor panel alike. */
.deck__dots{
  position:absolute; inset-inline-end:12px; bottom:12px; pointer-events:auto;
  display:flex; gap:7px; align-items:center; padding:8px 12px; border-radius:999px;
  background:rgba(5,8,28,.6); backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);
}
.deck__dot{
  width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.42); box-shadow:0 1px 4px rgba(0,0,0,.5);
  transition:background .18s var(--ease), width .18s var(--ease);
}
.deck__dot:hover{background:rgba(255,255,255,.75);}
.deck__dot.is-active{width:24px; border-radius:999px; background:var(--kesk-bright);}
.deck__dot:focus-visible{outline:2px solid var(--kesk-bright); outline-offset:3px;}

/* Sponsor slide — fills the slide box, dashed like the other unsold slots. */
/* Sponsor slide — the creative occupies exactly the same 16/9 box as an
   editorial slide's photo, so the shared control rail lands on its edge too. */
.deck__slide--ad{display:flex; align-items:flex-start;}
.adslot--deck{position:relative; width:100%;}
/* Label floats inside the creative so the panel starts flush with the photo
   box on the neighbouring slides — otherwise the control rail sits off-edge. */
.adslot--deck .adslot__label{position:absolute; top:10px; inset-inline-start:16px; margin:0; text-align:start; z-index:2;}
.adslot--deck .ad{aspect-ratio:16/9; display:flex; align-items:center; border-style:dashed; border-radius:12px;}
/* Clear the overlaid arrows on both sides. */
.adslot--deck .ad__in{width:100%; padding:34px 68px;}
.adslot--deck .ad__title{font-size:clamp(20px,2vw,26px);}
.adslot--deck .ad__desc{font-size:15px;}

@media (prefers-reduced-motion:no-preference){
  .deck__track{scroll-behavior:smooth;}
}
@media (max-width:680px){
  .deck__track{gap:16px;}
  .deck__nav{width:34px; height:34px;}
  .deck__nav--prev{inset-inline-start:8px;}
  .deck__nav--next{inset-inline-end:8px;}
  .deck__dots{bottom:10px;}
  .adslot--deck .ad__in{padding:20px 52px;}
  .adslot--deck .ad__desc{display:none;}
  .deck__slide .card__dek{font-size:14.5px;}
}

.hero__side .row:first-child{border-top:0; padding-top:0;}

/* ---------- Market strip (PezkuwiChain) ------------------------------------ */
.market{background:var(--bg-band); border-block:1px solid var(--border-soft);}
.market__row{display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none;}
.market__row::-webkit-scrollbar{display:none;}
.market__tag{display:flex; align-items:center; gap:8px; padding-right:20px; margin-right:4px; border-right:1px solid var(--border); flex:none; color:var(--zer); font-weight:800; font-size:11px; letter-spacing:.10em; text-transform:uppercase;}
.tick{display:flex; align-items:center; gap:10px; padding:13px 22px; border-right:1px solid var(--border-soft); flex:none;}
.tick__sym{font-family:var(--display); font-weight:700; font-size:13px; color:#fff;}
.tick__price{font-family:var(--mono); font-size:13px; color:var(--ink-2);}
.tick__chg{font-family:var(--mono); font-size:12px; font-weight:600; padding:2px 7px; border-radius:5px;}
.up{color:var(--kesk-bright); background:rgba(47,200,100,.12);}
.down{color:var(--sor-bright); background:rgba(229,52,80,.12);}

/* ---------- Most read / live aside ----------------------------------------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px;}
.panel__head{font-family:var(--display); font-weight:700; font-size:16px; color:#fff; margin:0 0 6px; display:flex; align-items:center; gap:9px;}
.mostread{counter-reset:mr; display:flex; flex-direction:column;}
.mostread a{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding-block:15px; border-top:1px solid var(--border-soft);}
.mostread a:first-of-type{border-top:0;}
.mostread a::before{counter-increment:mr; content:counter(mr); font-family:var(--display); font-weight:700; font-size:26px; line-height:.8; color:var(--kesk-bright); opacity:.55; min-width:24px;}
.mostread .t{font-weight:600; font-size:15px; line-height:1.32; color:var(--ink); transition:color .15s var(--ease);}
.mostread a:hover .t{color:#fff;}

.livebox{background:linear-gradient(160deg, rgba(226,35,26,.12), rgba(5,8,28,.2)); border:1px solid rgba(226,35,26,.3);}
.live-badge{display:inline-flex; align-items:center; gap:7px; background:var(--sor); color:#fff; font-weight:800; font-size:11px; letter-spacing:.06em; padding:4px 10px; border-radius:6px;}

/* ---------- Opinion / quote ------------------------------------------------ */
.opinion{display:flex; gap:16px; align-items:flex-start; padding-block:18px; border-top:1px solid var(--border-soft);}
.opinion:first-child{border-top:0;}
.opinion__av{width:46px; height:46px; flex:none; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:grid; place-items:center; font-family:var(--display); font-weight:700; color:var(--zer);}
.opinion .q{font-family:var(--serif); font-style:italic; font-size:16px; line-height:1.4; color:var(--ink); margin:0 0 7px;}
.opinion .by{font-size:12.5px; color:var(--ink-3); font-weight:600;}

/* ---------- Footer --------------------------------------------------------- */
.footer{background:var(--bg-2); border-top:1px solid var(--border); margin-top:30px; position:relative;}
.footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--flame-h); opacity:.85;}
.footer__top{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:36px; padding-block:48px;}
.footer__brand .brand{margin-bottom:16px;}
.footer__brand p{color:var(--ink-3); font-size:13.5px; line-height:1.6; max-width:34ch;}
.footer__col h4{font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px;}
.footer__col a{display:block; color:var(--ink-2); font-size:13.5px; padding-block:6px; transition:color .15s var(--ease);}
.footer__col a:hover{color:var(--kesk-bright);}
.footer__bottom{border-top:1px solid var(--border-soft); padding-block:22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; color:var(--ink-3); font-size:12.5px;}
.footer__bottom .util__spacer{flex:1;}

/* ---------- Article page --------------------------------------------------- */
/* Reading surface: the whole article read — breadcrumb, title, byline, photo
   caption and body — sits on one continuous light paper page (cream) instead
   of the dark site chrome, for comfortable long-form reading (industry norm:
   NYT/Medium/Kindle all move long text off dark canvases). Only the sidebar
   (.aside-sticky — related links/widgets, not "the text") stays on the dark
   site background. */
.article{
  max-width:1180px; margin:0 auto; padding-inline:var(--gutter);
  --prose-bg:#F7F1E1; --prose-ink:#2A2318; --prose-ink-2:#5B5342;
  --prose-border:rgba(42,35,24,.15); --prose-link:var(--kesk-700);
  --prose-accent:var(--sor-700); --prose-gold:#8A5A00;
  background:var(--prose-bg); color:var(--prose-ink);
}
.crumbs{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--prose-ink-2); padding-top:30px;}
.crumbs a:hover{color:var(--prose-link);}
.article__head{max-width:820px; margin:18px 0 26px;}
.article .kicker{color:var(--prose-link);}
.article .kicker--red{color:var(--prose-accent);} .article .kicker--gold{color:var(--prose-gold);}
.article .kicker--blue{color:#0E6FA8;} .article .kicker--fire{color:var(--prose-accent);}
.article__title{font-family:var(--display); font-weight:700; font-size:clamp(30px,4.4vw,52px); line-height:1.05; letter-spacing:-.022em; color:var(--prose-ink); margin:14px 0 18px;}
.article__dek{font-family:var(--serif); font-size:clamp(18px,2vw,22px); line-height:1.5; color:var(--prose-ink-2);}
.byline{display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:20px; border-top:1px solid var(--prose-border);}
.byline__av{width:46px; height:46px; border-radius:50%; background:rgba(42,35,24,.06); border:1px solid var(--prose-border); display:grid; place-items:center; font-family:var(--display); font-weight:700; color:var(--prose-gold); flex:none;}
.byline__av--logo{background:none; border:0; border-radius:11px; overflow:hidden;}
.byline__av--logo img{display:block; width:100%; height:100%;}
.byline__who b{display:block; font-size:14.5px; color:var(--prose-ink);}
.byline__who span{font-family:var(--mono); font-size:11.5px; color:var(--prose-ink-2);}
.byline__share{margin-left:auto; display:flex; gap:8px; position:relative;}
.byline__share button{width:38px; height:38px; border-radius:50%; border:1px solid var(--prose-border); background:rgba(42,35,24,.04); color:var(--prose-ink-2); display:grid; place-items:center; transition:all .15s var(--ease); cursor:pointer;}
.byline__share button:hover{color:#fff; border-color:var(--prose-link); background:var(--prose-link);}
/* Share dropdown — the desktop fallback for browsers without the native share
   sheet (navigator.share). Anchored to .byline__share via its position:relative. */
.share-menu{position:absolute; top:calc(100% + 8px); right:0; background:var(--prose-bg); color:var(--prose-ink);
  border:1px solid var(--prose-border); border-radius:12px; box-shadow:0 16px 36px rgba(0,0,0,.22);
  padding:6px; display:flex; flex-direction:column; gap:2px; min-width:190px; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s var(--ease), transform .15s var(--ease);}
.share-menu.is-open{opacity:1; visibility:visible; transform:none;}
.share-menu a,.share-menu button{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--prose-ink); background:none; border:0;
  text-decoration:none; cursor:pointer; white-space:nowrap; width:100%; text-align:left;}
.share-menu a:hover,.share-menu button:hover{background:rgba(42,35,24,.07);}
.share-menu svg{flex:none; color:var(--prose-ink-2);}

.figure{margin:0 0 8px;}
.figure .photo{aspect-ratio:16/9; border-radius:12px;}
.figure figcaption{font-size:12.5px; color:var(--prose-ink-2); padding:10px 2px; display:flex; gap:8px; font-family:var(--mono);}
.figure figcaption b{color:var(--prose-ink); font-weight:600;}

.article__body{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; padding-block:34px; align-items:start;}
.aside-sticky{position:sticky; top:74px; display:flex; flex-direction:column; gap:26px; background:var(--bg); border-radius:16px;}
.prose,.prose-i18n{
  max-width:720px; margin:0 auto; background:var(--prose-bg); color:var(--prose-ink);
  padding:58px 68px; border-radius:3px;
  font-family:var(--serif); font-size:19px; line-height:1.78;
}
.prose>p,.prose-i18n>p{margin:0 0 26px;}   /* alignment is decided further down */
.prose>p:first-of-type::first-letter,.prose-i18n>p:first-of-type::first-letter{font-family:var(--display); font-weight:700; font-size:64px; line-height:.78; float:left; padding:6px 14px 0 0; color:var(--prose-accent); letter-spacing:-.02em;}
html[dir="rtl"] .prose>p:first-of-type::first-letter,html[dir="rtl"] .prose-i18n>p:first-of-type::first-letter{float:right; padding:6px 0 0 12px;}
.prose h3,.prose-i18n h3{font-family:var(--display); font-weight:700; font-size:24px; color:var(--prose-ink); margin:44px 0 16px; letter-spacing:-.01em; padding-bottom:10px; border-bottom:1px solid var(--prose-border);}
.prose a,.prose-i18n a{color:var(--prose-link); text-decoration:underline; text-underline-offset:3px;}
.prose blockquote,.prose-i18n blockquote{margin:34px 0; padding:6px 0 6px 26px; border-left:3px solid; border-image:var(--flame-v) 1; font-family:var(--display); font-style:normal; font-weight:600; font-size:25px; line-height:1.3; color:var(--prose-ink);}
.prose .pull-by,.prose-i18n .pull-by{display:block; font-family:var(--mono); font-size:12px; color:var(--prose-gold); margin-top:12px; font-weight:500;}
.prose ol,.prose-i18n ol,.prose ul,.prose-i18n ul{margin:0 0 26px; padding-left:28px;}
.prose li,.prose-i18n li{margin-bottom:10px;}
.tags{display:flex; flex-wrap:wrap; gap:9px; padding-top:8px;}
.tag{font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); padding:7px 14px; border-radius:999px; transition:all .15s var(--ease);}
.tag:hover{color:#fff; border-color:var(--kesk); background:var(--surface-2);}
.article .tag{color:var(--prose-ink-2); background:rgba(42,35,24,.05); border-color:var(--prose-border);}
.article .tag:hover{color:#fff; border-color:var(--prose-link); background:var(--prose-link);}

/* ---------- Category page -------------------------------------------------- */
.cathead{padding-block:40px 28px; border-bottom:1px solid var(--border); position:relative;}
.cathead h1{font-family:var(--display); font-weight:700; font-size:clamp(34px,5vw,56px); letter-spacing:-.022em; margin:10px 0 12px; color:#fff;}
.cathead p{color:var(--ink-2); font-size:16px; max-width:60ch; line-height:1.55;}
/* The Opinion page's header: the section's promise on the left, and on the right
   who answers for what is written in it. One column on a narrow screen. */
.cathead--split{display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,400px); gap:22px 56px; align-items:center;}
.cathead__main{min-width:0;}
.cathead__note{display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:14px;
  background:linear-gradient(180deg,rgba(253,184,19,.06),rgba(253,184,19,.02)); border:1px solid rgba(253,184,19,.22);
  border-inline-start:3px solid var(--zer);}
.cathead__noteHead{display:flex; align-items:center; gap:9px; color:var(--zer);}
.cathead__noteMark{flex:none; display:block;}
.cathead__noteTitle{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.02em; color:#fff;}
.cathead .cathead__noteText{margin:0; max-width:none; font-size:14px; line-height:1.6; color:var(--ink);}
.cathead .cathead__noteSmall{margin:0; max-width:none; font-size:12.5px; line-height:1.5; color:var(--ink-3);}
.cathead__noteLinks{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3);}
.cathead__noteLinks a{color:var(--zer); text-decoration:underline; text-underline-offset:3px;}
.cathead__noteLinks a:hover{color:#fff;}
@media (max-width:900px){ .cathead--split{grid-template-columns:1fr;} }
/* The strip is rendered from data (news.js drops chips with no stories), so it
   arrives after the fetch — reserve its row to keep the headline from jumping. */
.chips{display:flex; gap:9px; flex-wrap:wrap; padding:22px 0 4px; min-height:59px; align-items:flex-start;}
.chips[hidden]{display:none;}
.chip__n{margin-inline-start:7px; font-family:var(--mono); font-size:10.5px; opacity:.62; font-weight:500;}
.chip.is-active .chip__n{opacity:.85;}
.chip{cursor:pointer;}
.chip:focus-visible{outline:2px solid var(--kesk-bright); outline-offset:2px;}
.chip{font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); padding:8px 16px; border-radius:999px; transition:all .15s var(--ease);}
.chip:hover{color:#fff; border-color:var(--border-strong);}
.chip.is-active{background:var(--kesk); color:#fff; border-color:var(--kesk); box-shadow:0 6px 18px rgba(0,150,57,.3);}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:30px 28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:30px;}
.divcol{display:grid; grid-template-columns:1.55fr 1px 1fr; gap:34px;}
.vline{background:var(--border-soft);}

/* ── Author portraits (Yazarlar grid + yazar.html archive header) ─────────── */
.authors-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:28px 18px;}
.author-card{display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; text-decoration:none; padding:16px 6px; border-radius:16px; transition:background .15s var(--ease), transform .15s var(--ease);}
.author-card:hover{background:var(--surface); transform:translateY(-3px);}
.author-card__pic{width:76px; height:76px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:21px; color:#fff; flex:none; border:1px solid var(--border-strong); box-shadow:inset 0 -14px 22px -10px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);}
/* A portrait fills the same circle the monogram uses, so a roster that is only
   half photographed does not change shape as it fills. */
.author-card__pic--photo{padding:0; overflow:hidden; background:var(--surface-2);}
.author-card__pic--photo img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;}
.author-card__name{font-family:var(--display); font-weight:600; font-size:13.5px; line-height:1.3; color:var(--ink);}
.author-card:hover .author-card__name{color:#fff; text-decoration:underline; text-decoration-color:var(--kesk-bright); text-underline-offset:3px;}
.author-avatar--c0{background:linear-gradient(145deg,var(--kesk) 0%,#0D1E54 100%);}
.author-avatar--c1{background:linear-gradient(145deg,var(--sor) 0%,#0E1A4A 100%);}
.author-avatar--c2{background:linear-gradient(145deg,var(--zer-600) 0%,#0E1A4A 100%);}
.author-avatar--c3{background:linear-gradient(145deg,var(--info) 0%,#0C1748 100%);}
.author-avatar--c4{background:linear-gradient(145deg,var(--fire) 0%,#0E1A4A 100%);}
.author-avatar--c5{background:linear-gradient(145deg,#4A4FBF 0%,#0C1130 100%);}
.author-hero{display:flex; align-items:center; gap:22px; margin:10px 0 12px;}
.author-hero .author-card__pic{width:88px; height:88px; font-size:27px;}
.author-hero h1{margin:0;}
@media (max-width:860px){.authors-grid{grid-template-columns:repeat(4,1fr);}}
@media (max-width:520px){.authors-grid{grid-template-columns:repeat(3,1fr); gap:22px 12px;} .author-hero{gap:16px;} .author-hero .author-card__pic{width:64px; height:64px; font-size:20px;}}

/* ---------- Search overlay ------------------------------------------------- */
.search-overlay{position:fixed; inset:0; z-index:200; background:rgba(4,6,15,.74); backdrop-filter:blur(10px); display:flex; align-items:flex-start; justify-content:center; padding-top:14vh; opacity:0; visibility:hidden; transition:opacity .2s var(--ease);}
.search-overlay.open{opacity:1; visibility:visible;}
.search-overlay__box{width:min(680px,90vw); transform:translateY(-12px); transition:transform .25s var(--ease-out);}
.search-overlay.open .search-overlay__box{transform:none;}
.search-overlay__field{display:flex; align-items:center; gap:14px; background:var(--bg-3); border:1px solid var(--border-strong); border-radius:16px; padding:18px 22px; box-shadow:var(--shadow-pop);}
.search-overlay__field input{flex:1; background:transparent; border:0; outline:0; color:#fff; font-family:var(--display); font-size:22px; font-weight:500;}
.search-overlay__field input::placeholder{color:var(--ink-4);}
.search-overlay__close{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink-2); display:grid; place-items:center;}
.search-overlay__sug{margin-top:18px; display:flex; gap:9px; flex-wrap:wrap;}
.search-overlay__sug span{font-size:11px; color:var(--ink-3); align-self:center; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase;}
.search-overlay__sug a{font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface); border:1px solid var(--border); padding:7px 13px; border-radius:999px;}
.search-overlay__sug a:hover{color:#fff; border-color:var(--kesk);}

.reveal{opacity:0; transform:translateY(14px);}
.reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);}

/* Two homepage layouts that used to be written inline. An inline style cannot
   be reached by a media query, so on a phone the side column never stacked: the
   page ran 652 px wide inside a 390 px screen and the column sat off-screen.
   Layout belongs here, where a breakpoint can see it. */
.sec-split{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:44px; align-items:start;}
.sec-pair{display:grid; grid-template-columns:minmax(0,1.4fr) 1px minmax(0,1fr); gap:40px; align-items:start;}

/* ---------- Responsive ----------------------------------------------------- */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr; gap:26px;}
  .footer__top{grid-template-columns:1fr 1fr 1fr; }
  .footer__brand{grid-column:1/-1;}
  .article__body{grid-template-columns:1fr;}
  .aside-sticky{position:static; flex-direction:row; flex-wrap:wrap;}
  .aside-sticky>*{flex:1; min-width:260px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .divcol{grid-template-columns:1fr;}
  .sec-split{grid-template-columns:1fr; gap:30px;}
  .sec-pair{grid-template-columns:1fr; gap:28px;}
  .vline{display:none;}
}
@media (max-width:760px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr 1fr;}
  .masthead__row{flex-wrap:wrap; gap:16px;}
  .util__row{gap:12px;}
  .util__hide{display:none;}
  .card--lg .card__title{font-size:26px;}
  .prose,.prose-i18n{font-size:18px; padding:40px 34px;}
}
@media (max-width:520px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr 1fr;}
  .prose,.prose-i18n{padding:28px 20px; border-radius:0;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
  .ticker__items{transition:none;}
}

/* =============================================================================
   COMPARISON TABLE — opinion/columns (T-NPoS vs classic PoS)
   ========================================================================== */
.prose .cmp,.prose-i18n .cmp{width:100%; border-collapse:collapse; margin:30px 0; font-size:14px;
  border:1px solid var(--prose-border); border-radius:14px; overflow:hidden; display:table;}
.prose .cmp thead th,.prose-i18n .cmp thead th{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:-.01em;
  text-align:left; padding:14px 15px; background:rgba(42,35,24,.04); color:var(--prose-ink); border-bottom:1px solid var(--prose-border);}
.prose .cmp thead th.is-pez,.prose-i18n .cmp thead th.is-pez{color:var(--prose-link); background:rgba(0,150,57,.10);}
.prose .cmp tbody td,.prose-i18n .cmp tbody td,.prose .cmp td,.prose-i18n .cmp td{padding:14px 15px; border-bottom:1px solid var(--prose-border); vertical-align:top; line-height:1.5; color:var(--prose-ink-2);}
.prose .cmp tr:last-child td,.prose-i18n .cmp tr:last-child td{border-bottom:0;}
.prose .cmp td.feat,.prose-i18n .cmp td.feat{font-family:var(--display); font-weight:700; color:var(--prose-ink); white-space:nowrap;}
.prose .cmp td.is-pez,.prose-i18n .cmp td.is-pez{color:var(--prose-ink); background:rgba(0,150,57,.06);}
.prose .cmp td.is-pez b,.prose-i18n .cmp td.is-pez b{color:var(--prose-link);}
.prose .cmp td .old,.prose-i18n .cmp td .old{color:var(--sor-700); font-weight:600;}
@media (max-width:680px){
  .prose .cmp, .prose .cmp thead, .prose .cmp tbody, .prose .cmp th, .prose .cmp td, .prose .cmp tr,.prose-i18n .cmp,.prose-i18n .cmp thead,.prose-i18n .cmp tbody,.prose-i18n .cmp th,.prose-i18n .cmp td,.prose-i18n .cmp tr{display:block;}
  .prose .cmp thead,.prose-i18n .cmp thead{display:none;}
  .prose .cmp tr,.prose-i18n .cmp tr{border-bottom:1px solid var(--prose-border); padding:6px 0;}
  .prose .cmp td,.prose-i18n .cmp td{border:0; padding:7px 14px;}
  .prose .cmp td.feat,.prose-i18n .cmp td.feat{padding-top:12px; font-size:15px;}
  .prose .cmp td.is-pez::before,.prose-i18n .cmp td.is-pez::before{content:"PezkuwiChain · "; color:var(--prose-link); font-weight:700;}
  .prose .cmp td:not(.feat):not(.is-pez)::before,.prose-i18n .cmp td:not(.feat):not(.is-pez)::before{content:"Klasik PoS · "; color:var(--sor-700); font-weight:600;}
}
.prose ul.lede,.prose-i18n ul.lede{margin:18px 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.prose ul.lede li,.prose-i18n ul.lede li{position:relative; padding-left:26px; line-height:1.6;}
.prose ul.lede li::before,.prose-i18n ul.lede li::before{content:""; position:absolute; left:0; top:10px; width:11px; height:11px; border-radius:3px;
  background:linear-gradient(135deg,var(--kesk),var(--zer));}
.prose ul.lede li b,.prose-i18n ul.lede li b{color:var(--prose-ink);}

/* Lead / closing emphasis paragraph in opinion columns (markup-free for i18n) */
.prose .lead,.prose-i18n .lead{font-family:var(--display); font-weight:600; font-size:clamp(18px,2vw,22px);
  line-height:1.5; color:var(--prose-ink); letter-spacing:-.01em;}

/* === LOKOMOTIF (live media pulse) === */
.lokomotif{position:relative;}
.lokomotif .shead{display:flex;align-items:center;gap:14px;}
.lokomotif__upd{margin-left:auto;}
.lokomotif__feed{position:relative;margin-top:18px;overflow:hidden;mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);}
.lokomotif__track{display:flex;gap:14px;width:max-content;animation:lokMarquee 90s linear infinite;will-change:transform;}
.lokomotif__feed:hover .lokomotif__track{animation-play-state:paused;}
@keyframes lokMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
[dir="rtl"] .lokomotif__track{animation-name:lokMarqueeRTL;}
@keyframes lokMarqueeRTL{0%{transform:translateX(0);}100%{transform:translateX(50%);}}
.lokomotif__item{flex:0 0 auto;width:300px;display:flex;flex-direction:column;gap:8px;padding:15px 17px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;overflow:hidden;}
.lokomotif__item:hover{border-color:var(--kesk-bright);background:#0d1122;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,150,57,.12);}
.lokomotif__src{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--zer);letter-spacing:.08em;text-transform:uppercase;}
.lokomotif__time{color:var(--ink-3);font-size:10px;letter-spacing:.04em;}
.lokomotif__title{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.38;color:#fff;letter-spacing:-.012em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.lokomotif__placeholder{padding:30px 0;text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:13px;letter-spacing:.06em;}
[dir="rtl"] .lokomotif__src{font-family:var(--display);letter-spacing:0;}
@media (prefers-reduced-motion: reduce){.lokomotif__track{animation:none;}.lokomotif__feed{overflow-x:auto;mask:none;-webkit-mask:none;}}

/* New wordmark masthead */
.brand__logo{display:block; width:48px; height:48px; border-radius:11px; flex:none;}
.brand__name{display:flex; flex-direction:column; line-height:1;}
.brand__kicker{font:700 9px/1 var(--mono); letter-spacing:.28em; color:var(--ink-3); margin-bottom:5px;}
.brand__title{font:800 21px/1 var(--display); letter-spacing:.01em; color:#fff; white-space:nowrap;}
.brand__title em{font-style:normal; color:var(--zer);}
/* The masthead row is one line from 681 px up and has no room for the name
   below ~1180 px: the old wordmark was an image that shrank to 142 px, the
   name is text and does not. There the logo stands alone. Below 681 px the
   masthead wraps to two rows and the name returns, set smaller. */
@media (max-width:1180px) and (min-width:681px){.masthead__row .brand__name{display:none;} .masthead__row .brand__logo{width:44px; height:44px;}}
@media (max-width:680px){.brand__logo{width:40px; height:40px;} .brand__title{font-size:16px;}}
@media (max-width:420px){.brand{gap:8px;} .brand__logo{width:34px; height:34px;} .brand__kicker{display:none;} .brand__title{font-size:13px;}}
.footer__brand .brand__logo{width:56px; height:56px; border-radius:13px;}
.footer__brand .brand__title{font-size:24px;}
@media (max-width:420px){.footer__brand .brand__logo{width:44px; height:44px;} .footer__brand .brand__title{font-size:17px;}}

/* ════════════ PER-ARTICLE MULTILINGUAL (/a/<slug>) ════════════ */
/* render_per_article emits one .article-lang[data-il] block per language and
   marks the primary with [data-active]; show only the active one.

   These blocks sit inside .article, which is a light reading column — cream
   paper, dark ink. They therefore take the --prose-* tokens like .prose does,
   never a literal colour: white type was invisible on the cream ground. The
   body shares .prose's rules outright rather than restating them, so the two
   cannot drift apart again. */
.article-lang{display:none;}
.article-lang[data-active]{display:block; max-width:720px; margin:8px auto 0; padding-block:8px 40px;}
.article__title-i18n{font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,46px);
  line-height:1.1; letter-spacing:-.022em; color:var(--prose-ink); margin:14px 0 16px;}
.article__dek-i18n{font-family:var(--sans); font-weight:500; font-size:clamp(17px,2.4vw,21px);
  line-height:1.5; color:var(--prose-ink-2); margin:0 0 30px; padding-bottom:26px;
  border-bottom:1px solid var(--prose-border);}
/* No RTL alignment rule here on purpose. These elements sit inside
   .article-lang, which carries its own dir for the language actually on
   screen; `start` follows that. Keying alignment off the page dir instead
   right-aligned Turkish prose whenever a reader chose Soranî or Arabic on a
   story that had no translation — the direction was already correct, the
   alignment was not. */

/* ════════════ INSTITUTIONAL PAGES (about, contact, ethics, legal) ════════════ */
.doc-prose{max-width:68ch; font-size:16.5px; line-height:1.72; color:var(--ink-2);}
.doc-prose p{margin:0 0 18px;}
.doc-prose strong{color:var(--ink); font-weight:700;}
.doc-prose a{color:var(--kesk-bright); text-decoration:underline; text-underline-offset:3px;}
/* The founding document is framed from its canonical origin, never copied. */
.doc-frame{border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#fff;}
.doc-frame iframe{display:block; width:100%; height:82vh; min-height:520px; border:0;}
.doc-note{margin-top:12px; font-size:13.5px; color:var(--ink-3);}
.doc-note a{color:var(--kesk-bright);}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.contact-card{display:block; padding:20px 22px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); text-decoration:none;
  transition:border-color .2s var(--ease), transform .2s var(--ease);}
.contact-card:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.contact-card h3{font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); margin:0 0 8px;}
.contact-card p{font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 0 12px;}
@media(max-width:680px){ .doc-frame iframe{height:72vh;} }

/* ── Founding document, rendered from the canonical markdown ─────────────── */
.doc{max-width:76ch; margin-inline:auto; color:var(--ink-2); font-size:16.5px; line-height:1.72;}
.doc h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,44px); line-height:1.1;
  letter-spacing:-.02em; color:#fff; margin:8px 0 18px;}
.doc h2{font-family:var(--display); font-weight:700; font-size:clamp(23px,2.6vw,30px); color:#fff;
  margin:46px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.doc h3{font-family:var(--display); font-weight:700; font-size:20px; color:#fff; margin:32px 0 10px;}
.doc h4{font-family:var(--sans); font-weight:700; font-size:16px; color:var(--ink); margin:24px 0 8px;}
.doc p{margin:0 0 18px;}
.doc strong{color:var(--ink); font-weight:700;}
.doc em{color:var(--ink); font-style:italic;}
.doc code{font-family:var(--mono); font-size:.88em; background:var(--surface-2);
  border:1px solid var(--border); border-radius:5px; padding:1px 6px; color:var(--ink);}
.doc a{color:var(--kesk-bright); text-decoration:underline; text-underline-offset:3px;}
.doc hr{border:0; border-top:1px solid var(--border); margin:34px 0;}
.doc ol,.doc ul{margin:0 0 18px; padding-inline-start:26px;}
.doc li{margin:0 0 8px;}
/* Wide tables scroll inside their own box instead of stretching the page. */
.doc-table{overflow-x:auto; margin:0 0 22px; border:1px solid var(--border); border-radius:12px;}
.doc-table table{border-collapse:collapse; width:100%; font-size:14.5px;}
.doc-table th,.doc-table td{padding:10px 14px; text-align:start; border-bottom:1px solid var(--border-soft);}
.doc-table th{background:var(--surface-2); color:var(--ink); font-weight:700; white-space:nowrap;}
.doc-table tr:last-child td{border-bottom:0;}
.doc[data-doc-ready]{animation:none;}
@media(max-width:680px){ .doc{font-size:15.5px;} .doc-table table{font-size:13px;} }

/* The market row belongs to Ekonomi & Kripto. Every other page renders without
   it; the decision is made in <head> so the strip never flashes into view. */
.market{display:none;}
html[data-page-cat="ekonomi"] .market{display:block;}

/* ── Masthead now leads the page and carries what the utility bar held ───── */
.masthead__date{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;}
.masthead__row .lang{margin-inline-start:4px;}
.masthead__signin{font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;}
.masthead__signin:hover{color:#fff;}
@media(max-width:900px){ .masthead__date{display:none;} }
@media(max-width:680px){
  /* Two rows: identity and search above, then the controls in reading order.
     btn-sub needs an order of its own or it floats ahead of the switcher. */
  .masthead__row{flex-wrap:wrap; gap:10px 14px;}
  .masthead__row .brand{order:1;}
  .masthead__row .masthead__spacer{order:2;}
  .masthead__row .search-btn{order:3;}
  .masthead__row .lang{order:4; margin-inline-start:0;}
  /* The order belongs to whatever sits in the row. Once the address moved
     inside .acct, this rule started ordering it INSIDE that stack instead,
     sorting the sign-out above the address it belongs under. */
  .masthead__row > .masthead__signin, .masthead__row > .acct{order:5;}
  .acct > .masthead__signin{order:0;}
  .masthead__row .btn-sub{order:6; margin-inline-start:auto;}
}

/* ── Live TV placeholder (canli.html) ─────────────────────────────────────
   A 16:9 frame that holds the shape a player will take, and says plainly that
   nothing broadcasts yet. Dashed, not solid: an empty solid frame reads as a
   stream that failed to load. */
.livebox{position:relative; aspect-ratio:16/9; max-height:66vh; border:1px dashed var(--border-strong);
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(226,35,26,.10) 0%, rgba(7,10,28,0) 60%),
    linear-gradient(180deg,var(--surface-2),var(--surface));}
.livebox__in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; padding:28px 22px; text-align:center;}
.livebox__mark{border-radius:13px;}
.livebox__badge{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:800;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--zer);
  border:1px solid rgba(253,184,19,.38); border-radius:999px; padding:5px 13px;}
.livebox__name{font-family:var(--display); font-weight:700; font-size:clamp(19px,3.4vw,32px); color:#fff;
  line-height:1.2; max-width:22ch;}
.livebox__note{font-size:14px; line-height:1.65; color:var(--ink-2); max-width:52ch;}
.livebox__cta{display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:700;
  font-size:13.5px; color:var(--kesk-bright); text-decoration:none; margin-top:2px;}
.livebox__cta::after{content:"→"; transition:transform .2s var(--ease);}
[dir="rtl"] .livebox__cta::after{content:"←";}
.livebox__cta:hover{color:#fff;}
.livebox__cta:hover::after{transform:translateX(3px);}
[dir="rtl"] .livebox__cta:hover::after{transform:translateX(-3px);}
@media(max-width:680px){
  /* 16:9 leaves too little height for four stacked lines on a phone. */
  .livebox{aspect-ratio:auto; min-height:340px;}
  .livebox__note{font-size:13.5px;}
}

/* ── Reader identity & comments ───────────────────────────────────────────
   Identity here is an address, not a display name, so it is set in the mono
   face and shortened: the ends are what a person recognises. */
.masthead__signin.is-in{color:var(--kesk-bright); font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;}

.comments{padding-top:8px;}
.comments__count{font-family:var(--mono); font-size:13px; color:var(--ink-3); flex:none;}
.comments__empty{max-width:56ch;}
.comments__list{display:flex; flex-direction:column; gap:2px;}

.cmt{border-top:1px solid var(--border-soft); padding:16px 0;}
.cmt:first-child{border-top:0;}
.cmt__head{display:flex; align-items:center; gap:12px; margin-bottom:7px;}
.cmt__who{font-family:var(--mono); font-size:12px; color:var(--kesk-bright);}
.cmt__when{font-family:var(--mono); font-size:11.5px; color:var(--ink-3);}
.cmt__del{margin-inline-start:auto; background:none; border:0; padding:2px 4px; cursor:pointer;
  font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink-3);}
.cmt__del:hover{color:var(--sor-bright);}
.cmt__del:disabled{opacity:.5; cursor:default;}
.cmt__body{margin:0; font-size:15px; line-height:1.7; color:var(--ink); white-space:pre-wrap;
  overflow-wrap:anywhere;}

.comments__box{margin-top:22px; padding-top:20px; border-top:1px solid var(--border);}
.comments__input{width:100%; box-sizing:border-box; resize:vertical; min-height:84px;
  font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--ink); padding:13px 15px;
  background:var(--surface); border:1px solid var(--border); border-radius:11px;}
.comments__input:focus{outline:2px solid var(--kesk); outline-offset:1px; border-color:transparent;}
.comments__row{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap;}
.comments__whoami{font-family:var(--mono); font-size:12px; color:var(--kesk-bright);}
.comments__out{background:none; border:0; padding:2px 4px; cursor:pointer; font-family:var(--sans);
  font-size:12.5px; font-weight:600; color:var(--ink-3);}
.comments__out:hover{color:#fff;}
.comments__row .btn-sub{margin-inline-start:auto;}
.comments__note{margin:10px 0 0; font-size:13.5px; color:var(--sor-bright); min-height:1em;}
.comments__signin{text-decoration:none;}

/* ── Sign-in page (giris.html) ───────────────────────────────────────────── */
.signin{max-width:560px; margin-inline:auto; padding-block:8px 40px;}
.signin__card{border:1px solid var(--border); border-radius:16px; padding:28px 26px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));}
.signin__btn{width:100%; justify-content:center; margin-top:6px;}
.signin__note{margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); min-height:1em;}
.signin__note.is-bad{color:var(--sor-bright);}
.signin__accounts{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.signin__acc{display:flex; align-items:center; gap:12px; width:100%; text-align:start; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface);
  font-family:var(--sans); font-size:14px; color:var(--ink);}
.signin__acc:hover{border-color:var(--kesk); background:var(--surface-2);}
.signin__acc b{font-weight:700;}
.signin__acc span{font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  margin-inline-start:auto; white-space:nowrap;}
.signin__who{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.signin__addr{font-family:var(--mono); font-size:13px; color:var(--kesk-bright);
  overflow-wrap:anywhere;}

/* ── "not in your language" notice on /a/<slug> ───────────────────────────
   Sits above the story, inside the reading column, and speaks the language the
   reader chose — not the one the story happens to be in. */
.langnote{max-width:720px; margin:14px auto 0; padding:12px 16px; display:flex;
  align-items:center; gap:10px 12px; flex-wrap:wrap;
  border:1px solid var(--prose-border, var(--border)); border-inline-start:3px solid var(--zer);
  border-radius:10px; background:rgba(253,184,19,.07);
  font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--prose-ink-2, var(--ink-2));}
.langnote__msg{flex:1 1 auto; min-width:14ch;}
.langnote__also{font-weight:700; color:var(--prose-ink, var(--ink));}
.langnote__pick{cursor:pointer; font-family:var(--sans); font-size:12.5px; font-weight:700;
  padding:5px 11px; border-radius:999px; border:1px solid var(--prose-border, var(--border));
  background:transparent; color:var(--kesk-700, var(--kesk-bright));}
.langnote__pick:hover{border-color:var(--kesk); background:rgba(0,150,57,.10); color:var(--kesk-700, #fff);}
@media(max-width:680px){ .langnote{margin-inline:16px; font-size:13px;} }

/* ── Wallet sheet (dkn-wallet.js) ─────────────────────────────────────────
   One sheet for connect, sign-in and subscription — the shape the rest of the
   ecosystem uses, rather than a page of its own for each. */
.wsheet{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px;}
.wsheet[hidden]{display:none;}
.wsheet__scrim{position:absolute; inset:0; background:rgba(4,6,15,.72); backdrop-filter:blur(3px);}
.wsheet__box{position:relative; width:100%; max-width:440px; max-height:calc(100vh - 40px);
  overflow-y:auto; border:1px solid var(--border-strong); border-radius:16px;
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  box-shadow:0 24px 60px rgba(0,0,0,.55);}
.wsheet__head{display:flex; align-items:center; gap:11px; padding:18px 18px 12px;
  border-bottom:1px solid var(--border-soft);}
.wsheet__mark{display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center;
  border-radius:9px; background:var(--surface-2); flex:none;}
.wsheet__title{flex:1; font-family:var(--display); font-weight:700; font-size:16.5px; color:#fff;}
.wsheet__x{background:none; border:0; padding:6px; cursor:pointer; color:var(--ink-3); flex:none;}
.wsheet__x:hover{color:#fff;}
.wsheet__body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:12px;}
.wsheet__note{margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2);}
.wsheet__note.is-bad{color:var(--sor-bright);}
.wsheet__go{width:100%; justify-content:center;}
.wsheet__ghost{width:100%; padding:11px; cursor:pointer; border-radius:10px;
  border:1px solid var(--border); background:transparent; color:var(--ink-2);
  font-family:var(--sans); font-size:13.5px; font-weight:600;}
.wsheet__ghost:hover{border-color:var(--border-strong); color:#fff;}

.wsheet__opt{border:1px solid var(--border); border-radius:12px; padding:14px; display:flex;
  flex-direction:column; gap:11px; background:var(--surface);}
.wsheet__optHead{display:flex; flex-direction:column; gap:3px;}
.wsheet__optHead b{font-size:14px; color:#fff;}
.wsheet__optHead span{font-size:12.5px; color:var(--ink-3);}

.wsheet__busy{display:flex; align-items:center; gap:11px; padding:22px 4px; font-size:13.5px; color:var(--ink-2);}
.wsheet__spin{width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--kesk-bright);
  animation:wspin .8s linear infinite;}
@keyframes wspin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){ .wsheet__spin{animation-duration:2.4s;} }

.wsheet__accs{display:flex; flex-direction:column; gap:8px;}
.wsheet__acc{display:flex; align-items:center; gap:12px; width:100%; text-align:start; cursor:pointer;
  padding:12px 14px; border:1px solid var(--border); border-radius:11px; background:var(--surface);
  font-family:var(--sans); font-size:14px; color:var(--ink);}
.wsheet__acc:hover{border-color:var(--kesk); background:var(--surface-2);}
.wsheet__acc span{margin-inline-start:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3);}

.wsheet__card{border:1px solid var(--border); border-radius:12px; padding:14px; background:var(--surface);
  display:flex; flex-direction:column; gap:6px;}
.wsheet__k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.wsheet__v{font-size:13.5px; color:var(--ink);}
.wsheet__addrRow{display:flex; align-items:center; gap:10px;}
.wsheet__addr{flex:1; font-family:var(--mono); font-size:12px; color:var(--ink); overflow-wrap:anywhere;}
/* The label above the Tron address carries a brand name, and uppercasing it
   mangles that name: CSS uppercase follows the page's language, so in Turkish
   "PezkuwiChain" becomes "PEZKUWİCHAİN" with dotted capitals, and elsewhere
   "PEZKUWICHAIN". A product name is not a word to be re-cased. */
.wsheet__card--trc .wsheet__k{text-transform:none; letter-spacing:.01em; font-size:12.5px;}

/* Paying from outside the chain. It is the second route, so it waits closed
   under the wallet links: one calm row that names the coin and the network.
   Opened, the address is the largest thing in it, grouped in fives so it can
   be read back against a wallet screen, with one plain way to copy it; the
   instructions are two numbered steps and a separate caution, not a paragraph. */
.wsheet__trc{border:1px solid var(--border); border-radius:14px; background:var(--surface);
  overflow:hidden; transition:border-color .15s var(--ease);}
.wsheet__trc[open]{border-color:rgba(38,161,123,.45);}
.wsheet__trcSum{list-style:none; display:flex; align-items:center; gap:12px; padding:12px 14px;
  cursor:pointer; transition:background .15s var(--ease);}
.wsheet__trcSum::-webkit-details-marker{display:none;}
.wsheet__trcSum:hover{background:var(--surface-2);}
.wsheet__trcSum:focus-visible{outline:2px solid var(--kesk); outline-offset:-2px; border-radius:14px;}
.wsheet__trcMark{flex:none; display:flex; width:24px; height:24px;}
.wsheet__trcHead{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.wsheet__trc .wsheet__k{color:#fff; font-size:13.5px; font-weight:600; line-height:1.3;}
.wsheet__chip{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; line-height:1;
  color:#8FE6C4; background:rgba(38,161,123,.14); border:1px solid rgba(38,161,123,.32);
  border-radius:999px; padding:4px 8px;}
.wsheet__chev{flex:none; display:flex; color:var(--ink-3); transition:transform .2s var(--ease);}
.wsheet__trc[open] .wsheet__chev{transform:rotate(180deg); color:#fff;}
.wsheet__trcBody{display:flex; flex-direction:column; gap:12px; padding:14px; border-top:1px solid var(--border);}
.wsheet__addrBox{display:flex; flex-wrap:wrap; justify-content:center; gap:2px 9px; flex:none;
  padding:13px 12px; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px dashed var(--border-strong); font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:14.5px; line-height:1.55; letter-spacing:.03em; color:#fff; user-select:all;}
.wsheet__trc .wsheet__copyBig{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:11px 12px; border-radius:10px; border:1px solid rgba(38,161,123,.5);
  background:rgba(38,161,123,.14); color:#fff; font-family:var(--sans); font-size:13.5px; font-weight:600;
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);}
.wsheet__trc .wsheet__copyBig:hover{background:rgba(38,161,123,.24); border-color:#26A17B; color:#fff;}
.wsheet__trc .wsheet__copyBig.is-done{border-color:var(--kesk-bright); color:var(--kesk-bright); background:rgba(47,200,100,.10);}
.wsheet__copyMark{display:flex;}
.wsheet__steps{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:step;}
.wsheet__steps li{position:relative; counter-increment:step; padding-inline-start:32px;
  font-size:13px; line-height:1.6; color:var(--ink-2);}
.wsheet__steps li::before{content:counter(step); position:absolute; inset-inline-start:0; top:1px;
  width:21px; height:21px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:11px; font-weight:700; color:#fff;
  background:var(--surface-2); border:1px solid var(--border-strong);}
.wsheet__steps a{color:#8FE6C4; text-decoration:underline; text-underline-offset:3px; white-space:nowrap;}
.wsheet__steps a:hover{color:#fff;}
.wsheet__warn{margin:0; display:flex; align-items:flex-start; gap:8px; padding:9px 11px; border-radius:9px;
  background:rgba(253,184,19,.07); border:1px solid rgba(253,184,19,.22);
  font-size:12.5px; line-height:1.5; color:#F1CF79;}
.wsheet__warnMark{flex:none; display:flex; margin-top:2px;}
/* A class that sets `display` beats the browser's own `[hidden]` rule, because
   a class selector outranks the user-agent stylesheet. `.btn-sub` sets
   display:inline-flex, so hiding the "load more" button by setting `hidden`
   did nothing and it stayed on screen after the section had run out. Anything
   given `hidden` means it, everywhere. */
/* The address and, under it, a way out. It began as a panel that opened on
   click, which repeated the fault it was meant to fix: a reader who does not
   know to click their own address sees no sign-out at all. It is simply there
   now — and the utility row grows to hold two lines rather than clipping them. */
.acct{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.15;}
.acct__out{appearance:none; border:0; background:transparent; padding:0; cursor:pointer;
  font:inherit; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#E8564F; transition:color .15s var(--ease);}
.acct__out:hover{color:#FF8A84; text-decoration:underline; text-underline-offset:2px;}
.masthead__row:has(.acct__out:not([hidden])){height:auto; padding-block:6px;}

[hidden]{display:none !important;}

/* Where a reader without a wallet gets one, at the foot of the subscribe pane.
   Two rows rather than side by side: the store names are long and the sheet is
   360px on a phone. */
.wsheet__stores{display:flex; flex-direction:column; gap:8px; margin:10px 0 14px;}
.wsheet__store{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); text-decoration:none;
  transition:border-color .15s var(--ease), background .15s var(--ease);}
.wsheet__store:hover{border-color:var(--kesk); background:var(--surface-2);}
.wsheet__storeMark{flex:none; display:flex; width:20px; height:20px;}
.wsheet__storeTxt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.wsheet__storeTxt b{color:#fff; font-size:13.5px; font-weight:700; line-height:1.25;}
.wsheet__storeTxt span{color:var(--ink-2); font-size:11.5px; line-height:1.3;}
/* The address is long and must not push the sheet sideways on a phone. */
.wsheet__card .wsheet__addr{word-break:break-all; font-size:12px;}
.wsheet__copy{flex:none; cursor:pointer; background:none; border:1px solid var(--border);
  border-radius:8px; padding:5px 10px; font-family:var(--sans); font-size:11.5px; color:var(--ink-2);}
.wsheet__copy:hover{border-color:var(--kesk); color:#fff;}
.wsheet__badge{margin-top:6px; align-self:flex-start; font-family:var(--sans); font-weight:700;
  font-size:11.5px; letter-spacing:.04em; color:var(--zer);
  border:1px solid rgba(253,184,19,.38); border-radius:999px; padding:4px 11px;}

.wsheet__plans{display:flex; gap:10px; flex-wrap:wrap;}
.wsheet__plan{flex:1 1 150px; cursor:pointer; display:flex; flex-direction:column; gap:3px;
  padding:16px 14px; border:1px solid var(--border); border-radius:12px; background:var(--surface);
  text-align:start; font-family:var(--sans); color:var(--ink);}
.wsheet__plan:hover{border-color:var(--kesk); background:var(--surface-2);}
.wsheet__plan b{font-size:13px; color:var(--ink-2);}
.wsheet__price{font-family:var(--display); font-weight:700; font-size:26px; color:#fff; line-height:1.1;}
.wsheet__per{font-size:12px; color:var(--ink-3);}
.wsheet__save{margin-top:5px; align-self:flex-start; font-size:11px; font-weight:700; color:var(--kesk-bright);}

body.is-sheeted{overflow:hidden;}
@media(max-width:520px){
  .wsheet{padding:0; align-items:flex-end;}
  .wsheet__box{max-width:none; border-radius:16px 16px 0 0; max-height:88vh;}
}

/* The supporter badge on a comment, and on the masthead identity. */
.cmt__sub{font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.05em;
  color:var(--zer); border:1px solid rgba(253,184,19,.38); border-radius:999px; padding:2px 8px;}
.masthead__signin.is-sub{color:var(--zer);}

/* A machine translation announces itself, quietly, above the story. Smaller
   and lighter than the missing-language notice: that one explains why the
   reader is not getting what they asked for, this one is a disclosure. */
.autonote{margin:0 0 18px; padding:8px 0 0; font-family:var(--sans); font-size:12.5px;
  line-height:1.5; color:var(--prose-ink-2, var(--ink-3)); display:flex; align-items:center; gap:7px;}
.autonote::before{content:"🌐"; font-size:12px; opacity:.85;}

/* ── Search results ───────────────────────────────────────────────────────
   The overlay used to hold a box that did nothing. Results sit under it, in
   the same frosted panel, scrolling rather than pushing the page around. */
.search-overlay__res{margin-top:16px; max-height:min(58vh,520px); overflow-y:auto;
  display:flex; flex-direction:column;}
.search-overlay__note{margin:10px 2px; font-size:13.5px; color:var(--ink-3);}
.search-overlay__count{margin:4px 2px 8px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);}
.search-hit{display:flex; flex-direction:column; gap:3px; padding:11px 12px; border-radius:9px;
  text-decoration:none; color:var(--ink); border:1px solid transparent;}
.search-hit:hover,.search-hit:focus{background:var(--surface-2); border-color:var(--border);}
.search-hit__t{font-family:var(--sans); font-weight:600; font-size:14.5px; line-height:1.4; color:#fff;}
.search-hit__m{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3);}
.search-overlay__sug a{cursor:pointer;}

/* The pairing code, when the wallet is on another device. White ground on
   purpose: a QR on a dark panel is unreliable for many phone cameras. */
.wsheet__qr{display:flex; justify-content:center; padding:6px 0 2px;}
.wsheet__qr img{background:#fff; border-radius:14px; padding:12px; display:block;}

/* ── Breaking ticker on a narrow screen ───────────────────────────────────
   Measured on a phone: the headline link was 98 px wide inside a 46 px row, so
   a normal headline wrapped to THREE lines, spilled out of the row, and was
   clipped by the strip — which reads as the stories printing on top of one
   another. Two causes, both here.

   One: a flex child will not shrink below its content unless min-width is
   cleared, and the headline had no min-width:0 and no nowrap, so it took a
   narrow box and grew downwards instead of staying on one line.
   Two: the SON DAKİKA badge was taking 35% of a 390 px screen, leaving the
   headline almost nothing to sit in. */
.ticker__item a {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 680px) {
  .ticker__tag { padding-inline: 12px; font-size: 10.5px; letter-spacing: .04em; }
  .ticker__item { padding-left: 14px; gap: 10px; }
  .ticker__item time { font-size: 11px; }
}
@media (max-width: 420px) {
  /* Below this the badge and the time together leave no room for a headline,
     and a headline is the point of the strip. */
  .ticker__tag span { display: none; }
  .ticker__tag { padding-inline: 14px; }
}

/* ── Justified text needs hyphens, and a measure wide enough to justify ────
   Measured on a phone before this: the widest space on a line was 6.7× the
   median, with ten spaces on one screen more than double it. That is the
   "rivers" a reader sees. Two causes, and justification alone is not one of
   them — it is justification WITHOUT the two things it depends on.

   One: no hyphenation. The browser can only hyphenate when it knows the
   language, and the article blocks carried none; they now declare it, and
   `hyphens: auto` lets long Turkish words break instead of being shoved to the
   next line and stretching the one they left.

   Two: the measure. A justified column needs roughly 45 characters before the
   spare space per line is small enough to hide. On a phone this column is ~35,
   so justification there cannot be made to look right at any setting — it is
   set ragged-right instead, which is what a printed paper does in a narrow
   column too. */
.prose, .prose-i18n,
.prose > p, .prose-i18n > p,
.prose li, .prose-i18n li,
.doc-prose, .doc-prose p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;     /* don't break short words, or leave stubs */
}
/* Never hyphenate a headline or a standfirst: a broken word in display type is
   worse than a short line. */
.article__title, .article__title-i18n, .article__dek, .article__dek-i18n,
.card__title, .cathead h1, .prose h3, .prose-i18n h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
}
/* Ragged-right is the default, because it is never wrong. Justification is
   switched ON only for a block whose language this browser can actually
   hyphenate — news.js measures that and marks the block — and only where the
   measure is wide enough for the spare space to hide. */
.prose > p, .prose-i18n > p, .doc-prose p { text-align: start; }
@media (min-width: 761px) {
  .article-lang[data-hyph="1"] .prose-i18n > p,
  .prose[data-hyph="1"] > p { text-align: justify; }
}

/* ── Founding document (pezkuwichain.html) ────────────────────────────────
   Title and plate side by side. The artwork is dark-edged and centred, so a
   full-bleed band left a small image floating in a wide black field; framed and
   set beside the title it reads as a plate in a document. Nothing is typeset
   over it, so no text depends on it for contrast. */
.docmast{display:grid; grid-template-columns:minmax(0,1fr) 480px; gap:52px;
  align-items:center; padding-block:40px 8px;}
.docmast__text{min-width:0;}
.docmast__text h1{font-family:var(--display); font-weight:700; letter-spacing:-.024em;
  font-size:clamp(30px,4.6vw,52px); line-height:1.06; color:#fff; margin:12px 0 14px;}
.docmast__dek{font-family:var(--serif); font-size:clamp(17px,2.1vw,21px); line-height:1.55;
  color:var(--ink-2); max-width:46ch; margin:0;}

.docmast__plate{margin:0; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  background:var(--bg-3); box-shadow:0 18px 44px rgba(0,0,0,.38);}
.docmast__plate img{display:block; width:100%; height:auto;}

/* The source line is the page's method, so it is stated once, at the top, and
   framed rather than tucked away as a footnote. */
.docmast__src{display:flex; align-items:baseline; gap:10px 12px; flex-wrap:wrap;
  margin-top:26px; padding:14px 16px; border:1px solid var(--border);
  border-inline-start:3px solid var(--kesk); border-radius:11px; background:var(--surface);}
.docmast__srcLabel{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--kesk-bright); flex:none;}
.docmast__src a{font-family:var(--mono); font-size:13px; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere;}
.docmast__src a:hover{color:var(--kesk-bright);}
.docmast__srcNote{flex:1 1 100%; font-size:13px; line-height:1.6; color:var(--ink-3);}

.docbody{padding-top:30px; border-top:1px solid var(--border-soft); margin-top:34px;}
.docbody .doc{max-width:68ch;}

@media (max-width:900px){
  /* The plate leads on a narrow screen: it is the thing that says what this
     document is before a word is read. */
  .docmast{grid-template-columns:1fr; gap:26px; padding-block:24px 4px;}
  .docmast__plate{order:-1;}
  .docmast__dek{max-width:none;}
}

/* The Newroz fire, beside the Newroz page's title (the site's mark is the DK News logo). */
.newroz-title{display:flex; align-items:center; gap:14px;}
.newroz-title img{flex:none;}
.newroz-title h1{margin:0;}

/* A feed box before its stories arrive. The markup carries no stories of its own
   (scripts/check_site.py refuses any): a quiet block holds the layout instead of
   a headline nobody wrote, and a box that stays empty steps aside. */
[data-feed]:empty{display:block; border-radius:12px; background:linear-gradient(100deg, rgba(255,255,255,.025) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.025) 70%) 0 0/200% 100%; animation:feedwait 1.4s linear infinite;}
[data-feed="ticker"]:empty{min-height:20px;}
[data-feed="carousel"]:empty{min-height:420px;}
[data-feed="side"]:empty,[data-feed="divcol"]:empty,[data-feed="grid"]:empty{min-height:320px;}
[data-feed="mostread"]:empty{min-height:220px;}
[data-feed="live-stream"]:empty{min-height:160px;}
[data-feed][data-feed-empty]:empty{display:none;}
@keyframes feedwait{to{background-position:-200% 0;}}
@media (prefers-reduced-motion:reduce){[data-feed]:empty{animation:none;}}
[data-feed="rows"]:empty,[data-feed="opinion"]:empty{min-height:180px;}

/* The desk's own stories carry the DK News logo where a source name would stand. */
.src-logo{display:inline-block; width:20px; height:20px; border-radius:5px; vertical-align:middle;}

/* ── Author desk (docs/author-desk.md) ─────────────────────────────────────
   A columnist's own workspace on their author page. It sits one layer below
   the wallet sheet, which opens over it to sign each act. */
.author-login{appearance:none; border:0; background:none; padding:0; margin:2px 0 0; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;}
.author-login:hover{color:#fff;}
.desk__open{margin:6px 0 4px;}
body.is-desk{overflow:hidden;}
.desk{position:fixed; inset:0; z-index:150; display:flex; align-items:flex-start; justify-content:center;
  padding:28px 16px; background:rgba(4,6,15,.78); backdrop-filter:blur(3px); overflow-y:auto;}
.desk[hidden]{display:none;}
.desk__box{width:100%; max-width:860px; background:var(--bg-2, #0B1024); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.55);}
.desk__head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border);}
.desk__title{flex:1; font-family:var(--display); font-weight:700; font-size:17px; color:#fff; min-width:0;}
.desk__x{appearance:none; border:0; background:none; color:var(--ink-3); font-size:26px; line-height:1; cursor:pointer; padding:2px 6px;}
.desk__x:hover{color:#fff;}
.desk__body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:14px;}
.desk__new{align-self:flex-start;}
.desk__note{margin:0; font-size:14px; line-height:1.6; color:var(--ink-2);}
.desk__note.is-bad{color:var(--sor-bright, #FF7B72);}
.desk__note.is-good{color:var(--kesk-bright);}
.desk__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.desk__item{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface);}
.desk__itemText{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.desk__itemTitle{color:#fff; font-weight:600; font-size:14.5px; line-height:1.35; text-decoration:none;}
.desk__itemTitle:hover{text-decoration:underline;}
.desk__itemDate{font-size:12px; color:var(--ink-3); font-family:var(--mono);}
.desk__itemActs{display:flex; gap:8px; flex:none;}
.desk__btn{appearance:none; cursor:pointer; border:1px solid var(--border-strong); background:var(--surface-2);
  color:#fff; border-radius:9px; padding:8px 12px; font-family:var(--sans); font-size:13px; font-weight:600;}
.desk__btn:hover{border-color:var(--kesk);}
.desk__btn--bad{color:#FFB4AE;}
.desk__btn--bad:hover{border-color:#E8564F;}
.desk__btn--ghost{background:none; border-color:var(--border); color:var(--ink-2);}
.desk__form{display:flex; flex-direction:column; gap:14px;}
.desk__form[hidden]{display:none;}
.desk__field{display:flex; flex-direction:column; gap:6px;}
.desk__label{font-size:12.5px; font-weight:600; color:var(--ink-2); letter-spacing:.02em;}
.desk__hint{font-size:12px; color:var(--ink-3); line-height:1.5;}
.desk__input{width:100%; box-sizing:border-box; background:rgba(255,255,255,.035); border:1px solid var(--border-strong);
  border-radius:10px; padding:10px 12px; color:#fff; font:inherit; font-size:15px; line-height:1.55;}
.desk__input:focus{outline:none; border-color:var(--kesk); box-shadow:0 0 0 3px rgba(0,150,57,.25);}
.desk__text{min-height:320px; resize:vertical; font-family:var(--serif); font-size:16px;}
.desk__file{font-size:13px; color:var(--ink-2);}
.desk__preview{border:1px dashed var(--border-strong); border-radius:12px; padding:18px 20px; background:#F6F1E7; color:#1B1B1B;}
.desk__preview[hidden]{display:none;}
.desk__pvTitle{margin:0 0 6px; font-family:var(--display); font-size:22px; line-height:1.25; color:inherit;}
.desk__preview .desk__pvTitle{color:#111;}
.desk__pvDek{margin:0 0 12px; font-size:15px; color:#444;}
.desk__pvBody{font-family:var(--serif); font-size:17px; line-height:1.7;}
.desk__pvBody a{color:#0B5E2B;}
.desk__pvBody p{margin:0 0 1em;}
.desk__pvBody h3{font-family:var(--display); font-size:20px; margin:1.2em 0 .5em;}
.desk__pvBody h4{font-family:var(--display); font-size:17px; margin:1em 0 .4em;}
.desk__pvBody blockquote{margin:1em 0; padding-inline-start:14px; border-inline-start:3px solid #0B5E2B; color:#333;}
.desk__pvBody ul{margin:0 0 1em; padding-inline-start:22px;}
.desk__bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
/* In the editor the actions stay in reach while a long text scrolls under them. */
.desk__form ~ .desk__bar{position:sticky; bottom:0; margin:0 -20px -22px; padding:12px 20px;
  background:linear-gradient(180deg, rgba(8,12,30,.0), var(--bg-2) 30%); border-top:1px solid var(--border);}
.desk__go--bad{background:#B3261E; border-color:#B3261E;}
.desk__busy{display:flex; align-items:center; gap:11px; padding:26px 4px; font-size:14px; color:var(--ink-2);}
@media (max-width:620px){
  .desk{padding:0; align-items:stretch;}
  .desk__box{border-radius:0; min-height:100%; border:0;}
  .desk__item{flex-direction:column; align-items:stretch;}
  .desk__itemActs{justify-content:flex-end;}
  .desk__text{min-height:260px;}
}