/* ainesi — küre dışındaki sayfaların ortak stili (haber sayfası vb.) */

:root{
  --zemin:#070C15;
  --yuzey:#0E1725;
  --yuzey-2:#141F31;
  --murekkep:#F3F6FA;
  --murekkep-sonuk:#7E93AC;
  --amber:#F5B33C;
  --cizgi:rgba(126,147,172,.22);
  --cizgi-koyu:rgba(126,147,172,.13);
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--zemin);
  color:var(--murekkep);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  /* Altta şerit duruyor; yazının son satırı onun altında kalmasın. */
  padding-bottom:calc(var(--serit-h,64px) + 40px);
}

/* haberin üstündeki hafif hâle — küreyle aynı atmosfer */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(70vmin 50vmin at 50% -10%, rgba(34,62,102,.34) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

a{color:var(--amber)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.tepe{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  border-bottom:1px solid var(--cizgi-koyu);
}
/* İşaret ile yazı TEK ÖBEK. Ölçü em: punto değişince işaret de birlikte
   büyüyor (dar ekranda 17px oluyor), iki yere ayrı sayı yazılmıyor. */
.marka{
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:300;
  font-size:21px;
  letter-spacing:.005em;
  color:var(--murekkep);
  text-decoration:none;
}
.marka b{color:inherit; font-weight:inherit}
.tepe .bosluk{flex:1 1 auto}
.tepe .kat-bag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 14px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  color:var(--murekkep-sonuk);
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
}
.tepe .kat-bag:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.tepe .kat-bag .nokta{width:8px;height:8px;border-radius:50%;background:currentColor}

.sarmal{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 24px}

.iz{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:22px 0 18px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--murekkep-sonuk);
}
.iz a{color:var(--murekkep-sonuk);text-decoration:none}
.iz a:hover{color:var(--murekkep)}
.iz span[aria-hidden]{opacity:.5}

.ust-satir{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--murekkep-sonuk);
}
.ust-satir .kat{color:var(--amber);font-weight:500}
.rz-acil{
  padding:3px 8px;
  border-radius:4px;
  background:var(--amber);
  color:#0B1220;
  font-weight:600;
  letter-spacing:.1em;
}
.manset-giris{
  display:block;
  margin-bottom:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
}

h1{
  margin:0 0 14px;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-weight:700;
  font-size:clamp(27px,5.2vw,44px);
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.spot{
  margin:0 0 22px;
  font-size:clamp(17px,2.4vw,20px);
  line-height:1.55;
  color:var(--murekkep-sonuk);
  max-width:64ch;
}

figure{
  margin:0 0 26px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--cizgi-koyu);
  background:#101A2A;
}
/* GÖRSEL OLDUĞU GİBİ GÖSTERİLİR — kırpma yok.
   16:9'a zorlamak dikey fotoğrafın yarısını atıyor ve içine başlık
   basılmış kartlarda yazıyı kesiyordu. */
figure img{display:block;width:100%;height:auto}

/* DİKEY GÖRSEL YAN SÜTUNA GEÇER, yazı sağından akar.
   Dikey fotoğraf tam genişlik verilince ekranı boydan boya kaplıyor ve
   okuyucu haberin metnine ulaşmak için uzun uzun kaydırıyordu.

   Yön SUNUCUDA belirleniyor (gorsel_boy > gorsel_en), sınıf olarak
   basılıyor. Tarayıcıya bırakılsaydı düzen görsel yüklendikten sonra
   zıplardı. */
@media (min-width: 760px){
  figure.dikey{
    float:left;
    width:min(320px, 42%);
    margin:4px 26px 18px 0;
    shape-margin:26px;
  }
  /* Gövde float'ın etrafından akar; sonraki bölümler alta düşsün. */
  .govde{ overflow:visible }
  .govde::after{ content:""; display:block; clear:both }
}

/* Dar ekranda yan sütun yok: dikey görsel de tam genişlikte durur ama
   ekranı yutmasın diye boyu sınırlanır. */
@media (max-width: 759px){
  figure.dikey img{ max-height:70vh; object-fit:contain; background:#0A1220 }
}
figcaption{
  padding:9px 14px;
  font-size:12.5px;
  color:var(--murekkep-sonuk);
  border-top:1px solid var(--cizgi-koyu);
}

.govde{font-size:17.5px;line-height:1.75;max-width:66ch}
.govde p{margin:0 0 20px}
.govde h2{
  margin:32px 0 12px;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.01em;
}
.govde h3{margin:26px 0 10px;font-size:20px;font-weight:600}
.govde ul,.govde ol{margin:0 0 20px;padding-left:22px}
.govde li{margin-bottom:8px}
.govde blockquote{
  margin:24px 0;
  padding:4px 0 4px 18px;
  border-left:3px solid var(--amber);
  color:var(--murekkep-sonuk);
  font-size:19px;
  line-height:1.6;
}
.govde img{max-width:100%;height:auto;border-radius:10px}
.govde a{text-decoration:underline;text-underline-offset:3px}

.bos-govde{
  padding:22px;
  border:1px dashed var(--cizgi);
  border-radius:12px;
  color:var(--murekkep-sonuk);
  font-size:15px;
}

/* Kaynak beyanı — metnin bittiği yerde, etiketlerden önce. Sönük ve
   küçük: bilgi, vurgu değil. Üstünde ince bir ayraç var; okur metnin
   bittiğini görsün. */
.kaynak-beyani{
  margin:26px 0 0;
  padding-top:14px;
  border-top:1px solid var(--cizgi);
  color:var(--murekkep-sonuk);
  font-size:13px;
  letter-spacing:.02em;
}
.etiketler{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.etiketler a,.etiketler span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--cizgi);
  border-radius:999px;
  color:var(--murekkep-sonuk);
  text-decoration:none;
  font-size:13px;
}
.etiketler a:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}


/* ——— ilgili haberler ——— */
.ilgili{max-width:760px;margin:52px auto 0;padding:0 24px}
.ilgili h2{
  margin:0 0 16px;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:19px;
  font-weight:700;
}
.ilgili-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}

/* Kart bir dikey fotoğraftır; yazı fotoğrafın üstünde durur. */
.ilgili-kart{
  position:relative;
  display:block;
  aspect-ratio:3/4;
  border:1px solid var(--cizgi-koyu);
  border-radius:14px;
  overflow:hidden;
  background:#0B1220;
  color:inherit;
  text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.ilgili-kart:hover{border-color:rgba(245,179,60,.45);transform:translateY(-3px)}
.ilgili-kart img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;background:#101A2A;
}
.ilgili-kart .perde{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(4,8,14,.95) 0%,
    rgba(4,8,14,.86) 26%,
    rgba(4,8,14,.45) 52%,
    rgba(4,8,14,.08) 74%,
    transparent 90%);
}
.ilgili-kart .ic{position:absolute;left:0;right:0;bottom:0;padding:0 13px 14px}
.ilgili-kart .kat{
  display:block;
  margin-bottom:4px;
  font-size:11.5px;
  letter-spacing:.02em;
  color:rgba(243,246,250,.82);
  font-weight:500;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.ilgili-kart h3{
  margin:0;
  font-family:"IBM Plex Sans Condensed",sans-serif;
  font-size:19px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  max-height:4.2em;
  overflow:hidden;
}

.dip{
  max-width:760px;
  margin:56px auto 0;
  padding:22px 24px 0;
  border-top:1px solid var(--cizgi-koyu);
  font-size:13px;
  color:var(--murekkep-sonuk);
}
.dip a{color:var(--murekkep-sonuk)}

/* ——— SAĞDAKİ YÖN SÜTUNU ———
   Üç simge alt alta: geri · galaksi · küre. Yazı yok — adlar
   `title` içinde. Şeridin hemen üstünde başlar ki ikisi çakışmasın. */
.yan-ikonlar{
  position:fixed;
  right:16px;
  bottom:calc(var(--serit-h,64px) + env(safe-area-inset-bottom,0px) + 14px);
  z-index:9700;
  display:flex; flex-direction:column; gap:10px;
}
.yan-ikon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid var(--cizgi);
  border-radius:12px;
  background:rgba(14,23,37,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--murekkep-sonuk);
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.yan-ikon svg{width:21px;height:21px}
.yan-ikon:hover{color:var(--murekkep);border-color:rgba(126,147,172,.5);transform:translateY(-1px)}
.yan-ikon:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* Küre dönüş noktası: rengiyle ayrılıyor, sütunun en altında. */
.yan-ikon.kure{color:var(--amber);border-color:rgba(245,179,60,.4)}
.yan-ikon.kure:hover{border-color:var(--amber)}

/* ——— ALT KATEGORİ ŞERİDİ ———
   Küredeki şeridin aynısı: okur haber okurken de akış değiştirebilsin.
   Buradaki bağlantılar kategori SAYFASINA gider, küreye değil. */
:root{ --serit-h:64px }
.serit{
  position:fixed; left:0; right:0; bottom:0;
  z-index:9600;
  background:linear-gradient(to top,rgba(7,12,21,.97),rgba(7,12,21,.86));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--cizgi);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.serit-ic{
  display:flex; align-items:center; gap:8px;
  height:var(--serit-h); padding:0 12px;
  max-width:1280px; margin:0 auto;
}
.serit-liste{
  display:flex; align-items:center; gap:8px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto;
  /* Sunucu sayfasında taşma hesabı yok: burada JavaScript ile ölçüm
     yapmıyoruz, şerit kaydırılabilir. *Küredeki gibi menüye taşımak
     ölçüm ister, ölçüm de betik;* bu sayfa betiksiz de çalışmalı. */
  scrollbar-width:none;
}
.serit-liste::-webkit-scrollbar{display:none}
.serit .kat-dugme{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 14px;
  border-radius:10px;
  border:1px solid var(--cizgi);
  background:rgba(243,246,250,.04);
  color:var(--murekkep-sonuk);
  font-size:13px; font-weight:500;
  white-space:nowrap; text-decoration:none;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease;
}
.serit .kat-dugme .simge{
  width:18px; height:18px; flex:0 0 auto;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; opacity:.9;
}
.serit .kat-dugme .sayi{
  font-family:"IBM Plex Mono",monospace;
  font-size:10.5px; font-variant-numeric:tabular-nums; opacity:.6;
}
.serit .kat-dugme:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit .kat-dugme.secili{
  background:var(--amber); border-color:var(--amber);
  color:#0B1220; font-weight:600;
}
/* ——— ŞERİDİN SONUNDAKİ KURUMSAL SAYFALAR ———
   Künye, hakkımızda, iletişim. Kategori değiller: simgeleri ve haber
   sayıları yok, seçili olamazlar. Ayraç ile sönük yazı bunu söylüyor;
   *aralarına karışsalardı okur "Künye"yi boş bir kategori sanırdı.* */
.serit-ayrac{
  flex:0 0 auto;
  width:1px; height:22px;
  background:var(--cizgi);
  margin:0 4px;
}
.serit .kat-dugme.duz{
  border-color:transparent;
  background:transparent;
  font-weight:400;
  opacity:.78;
}
.serit .kat-dugme.duz:hover{
  border-color:var(--cizgi);
  opacity:1;
}

/* Düz sayfanın gövdesi haberinkiyle aynı ölçüde okunur; tek fark
   üstünde manşet, görsel ve tarih olmaması. */
.duz-sayfa h1{margin:0 0 22px}
.duz-sayfa .govde{margin-top:0}

.serit-kure{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--cizgi);
  background:rgba(243,246,250,.04);
  color:var(--murekkep-sonuk);
  text-decoration:none;
  transition:color .18s ease,border-color .18s ease;
}
.serit-kure svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.serit-kure:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit-kure:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ——— eskisi: tek küre düğmesi (artık kullanılmıyor) ——— */
.kure-dugme{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:9000;
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:56px;
  padding:0 18px 0 14px;
  border:1px solid var(--cizgi);
  border-radius:10px;
  background:rgba(14,23,37,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--murekkep);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:border-color .16s ease,transform .16s ease,background-color .16s ease;
}
.kure-dugme:hover{
  border-color:var(--amber);
  background:rgba(20,31,49,.96);
  transform:translateY(-2px);
}
.kure-dugme svg{width:26px;height:26px;flex:0 0 auto;color:var(--amber)}
.kure-dugme .yazi{white-space:nowrap}

.donus-ipucu{
  position:fixed;
  right:20px;
  bottom:calc(86px + env(safe-area-inset-bottom,0px));
  z-index:8999;
  max-width:min(260px,calc(100vw - 40px));
  padding:9px 13px;
  border:1px solid var(--cizgi);
  border-radius:10px;
  background:rgba(14,23,37,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--murekkep-sonuk);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  animation:ipucuGel .3s ease-out;
}
@keyframes ipucuGel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.donus-ipucu b{color:var(--amber);font-weight:500}

@media (max-width:620px){
  body{font-size:16px;padding-bottom:calc(var(--serit-h,64px) + 34px)}
  .tepe{padding:14px 16px;gap:10px}
  .marka{font-size:17px}
  .tepe .kat-bag{font-size:12.5px;padding:0 11px;min-height:36px}
  .sarmal,.ilgili,.dip{padding-left:16px;padding-right:16px}
  .govde{font-size:16.5px}
  .kure-dugme{height:52px;padding:0 15px 0 12px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .donus-ipucu{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ilgili-liste{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .ilgili-kart h3{font-size:16px}
  .ilgili-kart .ic{padding:0 10px 11px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kure-dugme,.ilgili-kart{transition:none}
  .donus-ipucu{animation:none}
}

/* ——— 404 ——— */
.yok-sayfa{
  min-height:70svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:24px;
}
.yok-sayfa .ic{display:grid;gap:12px;justify-items:center;max-width:440px}
.yok-sayfa h1{font-size:clamp(24px,5vw,34px);margin:0}
.yok-sayfa p{margin:0;color:var(--murekkep-sonuk);font-size:15.5px}

/* Haber sayfasında video KENDİLİĞİNDEN OYNAMAZ.
   Kürede 4 saniyelik sessiz bir kesit dönüyor; burada okur ne zaman isterse
   o zaman başlatır. *Sayfa açılır açılmaz oynayan bir video okurun verisini
   habersiz harcar.* poster= sayesinde başlamadan önce haberin fotoğrafı durur. */
.haber-video{
  width:100%; display:block; border-radius:10px;
  background:#050910; aspect-ratio:16/9; object-fit:cover;
}

/* ——— kategori sayfası ——— */
.kt-bas{max-width:1060px;margin:26px auto 22px;padding:0 24px}
.kt-bas h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 6px;letter-spacing:-.01em}
.kt-bas p{margin:0;color:var(--murekkep-sonuk);font-size:13.5px}

.kt-liste{
  max-width:1060px;margin:0 auto;padding:0 24px;
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.kt-kart{
  border:1px solid var(--cizgi-koyu);border-radius:14px;overflow:hidden;
  background:#0D1523;transition:border-color .2s ease, transform .2s ease;
}
.kt-kart:hover{border-color:rgba(245,179,60,.45);transform:translateY(-3px)}
.kt-kart a{display:block;color:inherit;text-decoration:none}
/* Sabit oran: görsel yüklenmeden yer ayrılır, sayfa zıplamaz (CLS). */
.kt-gorsel{aspect-ratio:4/3;background:#101A2A;overflow:hidden}
.kt-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.kt-yazi{padding:13px 15px 15px}
.kt-yazi h2{font-size:16px;line-height:1.35;margin:0 0 7px;font-weight:650}
.kt-yazi p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:var(--murekkep-sonuk)}
.kt-yazi time{font-size:12px;color:var(--murekkep-sonuk);font-family:"IBM Plex Mono",monospace}
.kt-acil{
  display:inline-block;margin-bottom:7px;padding:2px 8px;border-radius:999px;
  background:rgba(230,45,45,.16);color:#FF8080;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
/* ——— akış içi reklam ———
   Haber kartıyla aynı ızgarada, aynı ölçüde durur ama karıştırılamaz:
   altın çerçeve ve "Reklam" plakası. *Reklamın reklam olduğunu yazmak
   yasal bir zorunluluk.* Kart 4:3 kutuda; reklamın kendi oranı buraya
   `object-fit:cover` ile oturuyor. */
.kt-kart.kt-reklam{border-color:rgba(214,186,116,.3)}
.kt-kart.kt-reklam:hover{border-color:rgba(226,206,148,.6)}
.kt-reklam-plaka{
  display:inline-block;margin-bottom:7px;padding:2px 8px;border-radius:999px;
  background:rgba(226,206,148,.88);color:#0E121A;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.kt-reklam .kt-yazi p{color:var(--murekkep-sonuk)}
.kt-bos{max-width:1060px;margin:0 auto;padding:40px 24px;color:var(--murekkep-sonuk)}

/* ——— 2. sayfadan sonra liste ———
   Kare küçük görsel + başlık + tarih/saat. Kare/dikdörtgen dili: satır
   bir dikdörtgen kutu, görsel kare. İlk sayfanın kart ızgarasının altına
   "Devamını göster" ile de bu satırlar ekleniyor. */
.kt-satirlar{
  max-width:1060px;margin:0 auto;padding:0 24px;
  display:grid;gap:8px;
}
.kt-liste + .kt-satirlar{margin-top:16px}
.kt-satir{
  border:1px solid var(--cizgi-koyu);border-radius:12px;background:#0D1523;
  transition:border-color .2s ease;
}
.kt-satir:hover{border-color:rgba(245,179,60,.45)}
.kt-satir a{display:flex;gap:14px;align-items:center;padding:10px 14px 10px 10px;color:inherit;text-decoration:none}
.kt-satir-gorsel{flex:0 0 72px;width:72px;height:72px;border-radius:10px;overflow:hidden;background:#101A2A}
.kt-satir-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.kt-satir-yazi{min-width:0;display:flex;flex-direction:column;gap:5px}
.kt-satir-yazi h2{font-size:15.5px;line-height:1.35;margin:0;font-weight:650;text-wrap:balance}
.kt-satir-yazi time{font-size:12px;color:var(--murekkep-sonuk);font-family:"IBM Plex Mono",monospace}
.kt-satir.kt-reklam{border-color:rgba(214,186,116,.3)}
.kt-satir .kt-reklam-plaka{align-self:flex-start;margin:0}
@media (max-width:620px){
  .kt-satirlar{padding:0 14px}
  /* Sağdaki yüzen yön düğmeleri (44 px) başlığın üstüne biniyordu
     (375 px'te ölçüldü): yazı onların altına girmesin. */
  .kt-satir a{padding-right:58px}
  .kt-satir-gorsel{flex-basis:60px;width:60px;height:60px}
  .kt-satir-yazi h2{font-size:14.5px}
}
.kt-devam-kap{max-width:1060px;margin:18px auto 0;padding:0 24px;display:flex;justify-content:center}
.kt-devam{
  min-height:46px;min-width:220px;padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--amber);border-radius:12px;color:var(--amber);
  text-decoration:none;font-size:14px;font-weight:600;background:transparent;
  transition:background-color .2s ease,color .2s ease;
}
.kt-devam:hover{background:var(--amber);color:#0B1220}
.kt-devam:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.kt-devam[aria-busy="true"]{opacity:.6;pointer-events:none}

/* ——— bütün akışlar (/akislar) — galaksinin betiksiz karşılığı ——— */
.ak-sayfa{max-width:1060px;margin:0 auto;padding:0 24px;display:grid;gap:28px}
.ak-bolum h2{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--murekkep-sonuk);margin:0 0 10px;font-weight:600}
.ak-izgara{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ak-kutu{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:10px 14px;
  border:1px solid var(--cizgi-koyu);border-radius:12px;background:#0D1523;color:var(--murekkep);
  text-decoration:none;transition:border-color .2s ease}
.ak-kutu:hover,.ak-kutu:focus-visible{border-color:rgba(245,179,60,.55)}
.ak-ad{font-size:15px;font-weight:600;line-height:1.3}
.ak-alt{font-size:12px;color:var(--murekkep-sonuk);font-family:"IBM Plex Mono",monospace}

/* ——— canlı yayın bülteni (/canli) ve yayın sayfası (/canli/<id>) ———
   Kırmızı yalnız CANLI ve BİRAZDAN durumunda; bülten satırı akışlar
   sayfasının kutu dilinde (kare köşe, ince çizgi). */
.cy-sayfa{max-width:1060px;margin:0 auto;padding:0 24px;display:grid;gap:28px}
.cy-gun h2{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--murekkep-sonuk);margin:0 0 10px;font-weight:600}
.cy-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cy-satir a{display:grid;grid-template-columns:64px 112px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:10px 14px;border:1px solid var(--cizgi-koyu);border-radius:12px;background:#0D1523;
  color:var(--murekkep);text-decoration:none;transition:border-color .2s ease}
.cy-satir:not(:has(.cy-poster)) a{grid-template-columns:64px minmax(0,1fr) auto}
.cy-satir a:hover,.cy-satir a:focus-visible{border-color:rgba(245,179,60,.55)}
.cy-saat{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.cy-poster{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#101A2A}
.cy-poster img{display:block;width:100%;height:100%;object-fit:cover}
.cy-yazi{display:grid;gap:3px;min-width:0}
.cy-yazi b{font-size:15.5px;font-weight:600;line-height:1.35;text-wrap:balance}
.cy-yazi span{font-size:13px;color:var(--murekkep-sonuk);line-height:1.45}
.cy-durum{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:4px 8px;border-radius:6px;border:1px solid var(--cizgi-koyu);color:var(--murekkep-sonuk)}
.cy-satir.d-canli a{border-color:rgba(224,36,58,.6)}
.cy-satir.d-canli .cy-durum{background:#E0243A;border-color:#E0243A;color:#fff}
.cy-satir.d-yaklasiyor .cy-durum{border-color:rgba(224,36,58,.6);color:#FF8A96}
.cy-satir.d-bitti a{opacity:.62}
.cy-yayin{max-width:1060px;margin:0 auto;padding:0 24px;display:grid;gap:16px}
.cy-bas{padding:0 !important}
.cy-etiket{margin:0 0 6px !important;font-size:12px !important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--murekkep-sonuk) !important}
.cy-yayin.d-canli .cy-etiket,.cy-yayin.d-yaklasiyor .cy-etiket{color:#FF6B7A !important}
.cy-oynatici{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#05080e;
  border:1px solid var(--cizgi-koyu);display:flex;align-items:center;justify-content:center}
.cy-yayin.d-canli .cy-oynatici{border-color:rgba(224,36,58,.6)}
.cy-oynatici iframe,.cy-oynatici video,.cy-oynatici img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.cy-not{position:relative;padding:6px 12px;border-radius:8px;background:rgba(5,8,14,.78);font-size:14px}
.cy-aciklama{margin:0;max-width:68ch;font-size:15.5px;line-height:1.65}
@media (max-width:620px){
  .cy-sayfa,.cy-yayin{padding:0 14px}
  .cy-satir a,.cy-satir:not(:has(.cy-poster)) a{grid-template-columns:52px minmax(0,1fr);padding-right:58px}
  .cy-poster{display:none}
  .cy-durum{grid-column:2;justify-self:start}
}

/* ——— düello gündem sayfası (/duello/<id>) ——— */
.dl-spot{margin-top:8px !important;max-width:720px;line-height:1.55;color:var(--murekkep) !important;font-size:15px !important}
.dl-liste{max-width:1060px;margin:0 auto;padding:0 24px;display:grid;gap:14px}
.dl-kart{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:18px;padding:14px;
  border:1px solid var(--cizgi-koyu);border-radius:14px;background:#0D1523}
.dl-kart:not(:has(.dl-poster-kap)){grid-template-columns:1fr}
.dl-poster-kap{border-radius:10px;overflow:hidden;background:#101A2A;align-self:start}
.dl-poster{display:block;width:100%;height:auto}
.dl-kaynak{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);font-weight:600;
  display:flex;align-items:center;gap:10px}
.dl-kaynak img{flex:none;width:30px;height:30px;padding:2px;border-radius:6px;background:#fff;object-fit:contain}
.dl-yazi h2{font-size:18px;line-height:1.35;margin:0 0 10px;font-weight:650;text-wrap:balance}
.dl-cerceve{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--murekkep);max-width:68ch}
.dl-git{font-size:13px;color:var(--amber)}
@media (max-width:620px){
  .dl-kart{grid-template-columns:1fr}
  .dl-liste,.ak-sayfa{padding:0 14px}
  /* Sağdaki yüzen yön düğmeleri (44 px) yazının üstüne biniyordu
     (375 px'te görüldü) — liste satırındaki payın aynısı. */
  .dl-yazi{padding-right:46px}
  .ak-sayfa{padding-right:62px}
}

.kt-sayfalama{
  max-width:1060px;margin:32px auto 0;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
}
.kt-syf{
  min-width:40px;min-height:40px;padding:0 13px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cizgi-koyu);border-radius:999px;
  color:var(--murekkep);text-decoration:none;font-size:13.5px;
  transition:border-color .2s ease,color .2s ease;
}
.kt-syf:hover{border-color:var(--amber);color:var(--amber)}
.kt-syf.secili{background:var(--amber);border-color:var(--amber);color:#0B1220;font-weight:700}
.kt-syf-ara{color:var(--murekkep-sonuk);padding:0 2px}

.kt-alt{max-width:1060px;margin:38px auto 60px;padding:0 24px;text-align:center}
.kt-alt a{color:var(--amber);font-size:13.5px}

/* ——— izlenebilir kategori bağlantıları (dipnot) ———
   Hem okur için gerçek bir gezinme, hem arama motoru için sitenin
   iskeletini gösteren bağlantı ağı. */
.kt-tum{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin:0 0 18px;
}
.kt-tum a,.kt-tum-secili{
  min-height:34px;padding:0 12px;
  display:inline-flex;align-items:center;
  border:1px solid var(--cizgi-koyu);border-radius:999px;
  font-size:13px;text-decoration:none;color:var(--murekkep-sonuk);
  transition:border-color .2s ease,color .2s ease;
}
.kt-tum a:hover{border-color:var(--amber);color:var(--amber)}
.kt-tum-secili{border-color:var(--amber);color:var(--amber);font-weight:600}

/* ——— HABER SAYFASINDA REKLAM ———
   Metin bittikten sonra tek blok. *Metnin İÇİNE serpiştirmek daha çok
   tıklanır ve bilerek yapılmadı:* okuma bir kere bölünür, sonra okur
   cümlenin başına dönüp yeniden başlar.

   Haber kartlarından AYRI görünmeli — okur neyin reklam neyin haber
   olduğunu bir bakışta ayırmalı. Bu yüzden çerçeveli ve yatay; haber
   kartları çerçevesiz ve dikey. */
.hb-reklam{
  max-width:760px;
  margin:34px auto 0;
  border:1px solid var(--cizgi);
  border-radius:14px;
  overflow:hidden;
  background:rgba(243,246,250,.03);
}
.hb-reklam a{
  display:flex; align-items:stretch; gap:0;
  text-decoration:none; color:inherit;
}
.hb-reklam-gorsel{
  flex:0 0 38%; max-width:240px;
  display:block; overflow:hidden;
  background:var(--zemin-2);
}
.hb-reklam-gorsel img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hb-reklam-yazi{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  padding:16px 18px;
}
/* "Reklam" plakası ŞART ve görünür olmalı: okurun neye baktığını
   bilme hakkı var, reklam mevzuatı da bunu istiyor. */
.hb-reklam-plaka{
  align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px;
  background:rgba(245,179,60,.16);
  border:1px solid rgba(245,179,60,.3);
  color:var(--amber);
}
.hb-reklam strong{ font-size:17px; line-height:1.3; font-weight:600 }
.hb-reklam span span,
.hb-reklam-yazi > span:last-child{ font-size:13.5px; color:var(--murekkep-sonuk) }
.hb-reklam:hover{ border-color:rgba(126,147,172,.45) }
.hb-reklam a:focus-visible{ outline:2px solid var(--amber); outline-offset:2px }

@media (max-width:620px){
  .hb-reklam a{ flex-direction:column }
  .hb-reklam-gorsel{ flex:0 0 auto; max-width:none; aspect-ratio:16/9 }
}
/* ═══ ÜYELİK EKRANLARI ═══════════════════════════════════════
   Sitenin kapısı: tek sütun, ortalanmış, dikkat dağıtan hiçbir şey yok.
   *Küre ekranındaki "yazı yok, simge var" kuralı BURADA GEÇERSİZ* —
   form alanının etiketi süs değil, ne yazacağını söyleyen bilgidir.
   Ekran okuyucu için de görünür etiket şart; yer tutucu (placeholder)
   etiket yerine geçmez, yazmaya başlayınca kaybolur.               */
.uye-sarmal{
  position:relative; z-index:1;
  width:min(460px, calc(100% - 32px));
  margin:0 auto; padding:28px 0 40px;
  display:flex; flex-direction:column; gap:16px;
}
.uye-kutu{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:16px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:10px;
}
.uye-kutu.genis{gap:14px}
.uye-kutu.ic{background:var(--yuzey-2)}
.uye-kutu h1{margin:0 0 2px;font-size:26px;line-height:1.2;
  font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700}
.uye-kutu h2{margin:0;font-size:18px;font-weight:600}
.uye-alt{margin:0;font-size:13.5px;color:var(--murekkep-sonuk);line-height:1.5}
.uye-alt a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}

.uye-kutu label{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--murekkep-sonuk); margin-top:6px;
}
/* Keşfetteki arama kutusu bir `.uye-kutu` içinde değil ama aynı alan
   biçimini paylaşmak zorunda: *ayrı yazılsaydı* tarayıcının kendi
   varsayılanı gelir ve koyu sayfada beyaz bir kutu dururdu. */
.uye-kutu input, .kf-satir input{
  width:100%;
  /* 16px altına inme: iOS daha küçük yazıda alanı kendiliğinden
     büyütüyor ve sayfa zıplıyor. */
  font:inherit; font-size:16px;
  min-height:48px; padding:0 14px;
  color:var(--murekkep);
  background:var(--zemin);
  border:1px solid var(--cizgi);
  border-radius:10px;
}
.uye-kutu input:focus-visible, .kf-satir input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}

.uye-dg{
  margin-top:14px; min-height:50px; padding:0 18px;
  border:0; border-radius:12px;
  background:var(--amber); color:#0B1220;
  font:inherit; font-size:16px; font-weight:600; cursor:pointer;
  transition:filter .16s ease, transform .16s ease;
}
.uye-dg:hover{filter:brightness(1.06)}
.uye-dg:active{transform:translateY(1px)}
.uye-dg.ikincil{
  background:transparent; color:var(--murekkep-sonuk);
  border:1px solid var(--cizgi);
}
.uye-dg.ikincil:hover{color:var(--murekkep);border-color:rgba(126,147,172,.5)}

.uye-uyari{
  margin:0; padding:11px 13px; border-radius:10px;
  font-size:14px; line-height:1.45;
}
.uye-uyari.kotu{background:rgba(220,84,72,.12);border:1px solid rgba(220,84,72,.4)}
.uye-uyari.iyi{background:rgba(76,175,120,.12);border:1px solid rgba(76,175,120,.38)}

/* Paylaşım kapısının üç kademesi. Okur hangi aşamada olduğunu ve
   sıradaki adımı görmeli; yoksa "neden paylaşamıyorum" cevapsız kalır. */
.uye-kademe{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.uye-kademe li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px}
.uye-kademe .no{
  flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  border:1px solid var(--cizgi); color:var(--murekkep-sonuk);
}
.uye-kademe li.tamam .no{
  background:var(--amber); border-color:var(--amber); color:#0B1220; font-weight:700;
}
.uye-kademe li.tamam b{color:var(--murekkep)}

@media (max-width:480px){
  .uye-sarmal{padding-top:18px}
  .uye-kutu{padding:20px 16px;border-radius:14px}
  .uye-kutu h1{font-size:23px}
}

/* ═══ GÖNDERİ EKRANLARI ═══════════════════════════════════════
   Kart biçimi haberinkinden AYRI ve öyle kalmalı: haber kartı dikey
   fotoğraf + büyük manşet, gönderi kartı yatay + üstte kim yazdı.
   *Bir okur gönderisinin haber gibi görünmesi bu sistemin en kötü
   arıza hâli;* ayrım şemada var, ekranda da olmalı.            */
.uye-sarmal.genis{width:min(620px, calc(100% - 32px))}

/* ——— HESABIM: masaüstünde geniş, iki sütun ———
   Kemal: *"bu sayfa neden mobil gibi… daha kullanışlı hale getir"* ve
   *"webde farklı görünsün."* Üstte başlık ve bütün bağlantılar tek satırda
   düğme; solda hesap durumu, kimlik, profil, doğrulama, şifre; sağda öne
   çıkarma, onaylar, hesap kapatma. 900 px altında tek sütun (telefon aynı). */
.uye-sarmal.hs-genis{width:min(1180px, calc(100% - 32px))}
.uye-kutu.hs-bas{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px}
.hs-bas-sol{display:flex; flex-direction:column; gap:4px; min-width:0}
.hs-bas-sol h1{margin:0}
.hs-nav{display:flex; flex-wrap:wrap; gap:8px}
.hs-nav a{display:inline-flex; align-items:center; min-height:42px; padding:0 14px; border:1px solid var(--cizgi);
  border-radius:10px; color:var(--murekkep); text-decoration:none; font-size:14px; white-space:nowrap}
.hs-nav a:hover,.hs-nav a:focus-visible{border-color:var(--amber); color:var(--amber)}
.hs-nav a.birincil{background:var(--amber); border-color:var(--amber); color:#0B1220; font-weight:600}
.hs-izgara{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start}
.hs-sutun{display:flex; flex-direction:column; gap:16px; min-width:0}
.hs-nav a.secili{border-color:var(--amber); color:var(--amber)}
@media (max-width:900px){
  .hs-izgara{grid-template-columns:1fr}
  .uye-kutu.hs-bas{flex-direction:column; align-items:stretch}
  .hs-nav a{min-height:44px}
}

/* ——— HESAP: FOTOĞRAF SOL ÜSTTE ———
   Kemal: *"fotoğraf bölümü en üst solda olmalı.. altında hesap durumu."*
   Sol sütun dar ve sabit: fotoğraf, hesap durumu, doğrulama. */
.hs-foto-izgara{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
.uye-kutu.hs-foto{align-items:stretch}
.hs-foto-ad{display:flex; flex-direction:column; gap:2px; margin-top:2px}
.hs-foto-ad b{font-size:18px; overflow-wrap:anywhere}

/* İki eşit sütun (Ağım, Keşfet) ve orta genişlik (Bildirimler, Gönderilerim). */
.sy-iki{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start}
.sy-iki > .uye-kutu{margin:0}
.uye-sarmal.sy-orta{width:min(880px, calc(100% - 32px))}

/* ——— AYARLAR: webde iki sütun ———
   Solda kişiselleştirme (tek form, bölüm bölüm kutular; kaydet düğmesi
   kaydırırken altta yapışık), sağda hesap işlemleri: şifre, onaylar,
   hesabı kapatma, çıkış. */
.ay-izgara{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.ay-form{margin:0}
.ay-kutu > .ayar-grup:first-of-type{margin-top:2px}
.ay-kaydet{
  position:sticky; bottom:12px; z-index:2;
  padding:12px; border:1px solid var(--cizgi); border-radius:14px;
  background:var(--yuzey); box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.ay-kaydet .uye-dg{margin-top:0; width:100%}
/* Sağ sütundaki ikinci kaydet yapışık değil: iki yapışık çubuk yan yana dururdu. */
.ay-kaydet.ay-kaydet-sag{position:static; box-shadow:none; background:transparent; border:0; padding:0}
/* Haber bildirimleri: kelime kutusu ve üç filtre satırı (kategori · il · kelime). */
.ay-alan{display:flex; flex-direction:column; gap:6px; margin:2px 0 6px 30px}
.ay-alan label{margin-top:0}
.ay-filtre{
  border:1px solid var(--cizgi); border-radius:12px; margin:8px 0 0 30px; padding:8px 12px 12px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; min-width:0;
}
.ay-filtre legend{padding:0 6px; font-size:12px; color:var(--murekkep-sonuk)}
.ay-filtre > div{display:flex; flex-direction:column; gap:4px; min-width:0}
.ay-filtre label{margin-top:0}
.ay-filtre select, .ay-filtre input{min-width:0}
@media (max-width:620px){
  .ay-alan, .ay-filtre{margin-left:0}
  .ay-filtre{grid-template-columns:1fr}
}

/* ——— PROFİL: webde yatay künye ———
   Fotoğraf solda büyük, ortada ad-tanıtım-sayaçlar, sağda düğmeler. */
.uye-kutu.pr-tepe{display:grid; grid-template-columns:168px minmax(0,1fr) auto; gap:10px 28px; align-items:start}
.pr-orta{display:flex; flex-direction:column; gap:6px; min-width:0}
.pr-orta h1, .pr-orta p{margin:0}
.pr-sag{display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.pr-sag .pr-bildir{margin:0}
.uye-kutu.pr-gonderi{flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.pr-gonderi a.uye-dg{display:inline-flex; align-items:center; margin-top:0; text-decoration:none}

@media (max-width:900px){
  .hs-foto-izgara, .ay-izgara, .sy-iki{grid-template-columns:1fr}
  .uye-kutu.pr-tepe{grid-template-columns:72px minmax(0,1fr); gap:12px 14px}
  .pr-sag{grid-column:1 / -1; align-items:flex-start}
}

.uye-ust-bag{
  font-size:13.5px; color:var(--murekkep-sonuk);
  text-decoration:none; padding:8px 12px; border-radius:999px;
  border:1px solid transparent;
}
.uye-ust-bag:hover{color:var(--murekkep);border-color:var(--cizgi)}
/* Telefonda üst bağlantılar sığmıyordu (Keşfet · Bildirimler · Gönderilerim…):
   /bildirimler 390 px ekranda 507 px çiziliyor, sayfa yana kayıyordu.
   Bağlantılar logonun altına kendi satırına iner, satır sarar; hepsi görünür,
   dokunma alanı 44 px. */
@media (max-width:620px){
  .tepe{flex-wrap:wrap; row-gap:4px}
  .tepe .bosluk{flex:1 1 auto}
  .tepe .uye-ust-bag{display:inline-flex; align-items:center; min-height:44px; padding:0 10px; font-size:14px; white-space:nowrap}
}

.uye-kutu textarea{
  width:100%; font:inherit; font-size:16px; line-height:1.5;
  padding:12px 14px; resize:vertical; min-height:120px;
  color:var(--murekkep); background:var(--zemin);
  border:1px solid var(--cizgi); border-radius:10px;
}
.uye-kutu textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.uye-kutu input[type=file]{
  font:inherit; font-size:14px; color:var(--murekkep-sonuk);
  background:transparent; border:1px dashed var(--cizgi);
  border-radius:10px; padding:14px; min-height:auto;
}

.gd-kart{
  background:var(--yuzey);
  border:1px solid var(--cizgi);
  border-radius:14px;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.gd-kart.kaldirildi{opacity:.7; border-style:dashed}
.gd-ust{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:14px}
.gd-yazar{font-weight:600}
.gd-kadi{color:var(--murekkep-sonuk); font-size:13px}
.gd-zaman{
  margin-left:auto; color:var(--murekkep-sonuk);
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
}
.gd-metin{margin:0; font-size:16.5px; line-height:1.6; overflow-wrap:anywhere}
.gd-not{
  margin:0; font-size:14.5px; color:var(--murekkep-sonuk);
  padding:10px 12px; border-radius:10px; background:var(--zemin);
}

/* Görsel küçük kopyadan gelir, tıklanınca aslı açılır — küredeki
   kartın davranışının aynısı. *Tam boy görseli listeye basmak* okurun
   verisini yakar: 91 kart tam boyla 332 MB tutuyordu. */
.gd-medya{display:grid; gap:6px; border-radius:12px; overflow:hidden}
.gd-medya.coklu{grid-template-columns:1fr 1fr}
.gd-medya img{
  display:block; width:100%; height:100%;
  max-height:520px; object-fit:cover; background:var(--zemin);
}
.gd-medya.coklu img{aspect-ratio:1; max-height:none}

.gd-alt{
  display:flex; align-items:center; gap:14px;
  font-size:13px; color:var(--murekkep-sonuk);
}
.gd-alt a{color:var(--murekkep-sonuk); text-decoration:none}
.gd-alt a:hover{color:var(--murekkep); text-decoration:underline}
.gd-sil{margin-left:auto}
.gd-sil button{
  font:inherit; font-size:13px; cursor:pointer;
  background:transparent; border:0; padding:6px 4px;
  color:var(--murekkep-sonuk);
}
.gd-sil button:hover{color:#E8695E}

/* ——— TEKRAR PAYLAŞILAN GÖNDERİ ———
   Kaynak paylaşanın kartının İÇİNDE, kendi çerçevesinde. *Düz metin
   alıntı olsaydı* kimin söylediği kaybolurdu. */
.gd-kaynak{
  display:flex; flex-direction:column; gap:8px;
  padding:12px 14px; border:1px solid var(--cizgi);
  border-radius:12px; background:var(--zemin);
  text-decoration:none; color:inherit;
}
.gd-kaynak:hover{border-color:var(--murekkep-sonuk)}
.gd-kaynak .gd-metin{font-size:15px}
.gd-kaynak .gd-ust{display:flex}

/* ——— BEĞENİ VE PAYLAŞIM ———
   Dokunulabilir alan 44px; sayı yazının yanında, ayrı bir rozet değil.
   *Rozet olsaydı* boş bir gönderide "0" bir başarısızlık gibi dururdu. */
.gd-etkilesim{display:flex; align-items:center; gap:8px}
.gd-etkilesim form{margin:0}
.gd-dg{
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:6px 12px;
  font:inherit; font-size:14px; cursor:pointer; text-decoration:none;
  color:var(--murekkep-sonuk);
  background:transparent; border:1px solid var(--cizgi); border-radius:10px;
}
.gd-dg:hover{color:var(--murekkep); border-color:var(--murekkep-sonuk)}
/* Beğenili hâl RENKLE ve DOLU KALPLE birlikte anlatılıyor: yalnız renk
   ile anlatmak, renk ayırt edemeyen okur için hiçbir şey söylemez. */
.gd-dg.basili{color:#E8695E; border-color:rgba(232,105,94,.5)}

/* ——— YORUMLAR ———
   Yorum kartı GÖNDERİ kartından daha sönük ve çerçevesiz: sayfanın
   konusu gönderi, yorumlar onun etrafı. *Aynı ağırlıkta çizilseydi*
   otuz yorumlu bir sayfada asıl söz kaybolurdu.

   İkinci kat SOLDAN girintili ve sol kenarında bir çizgi var: hangi
   yanıtın hangi yoruma ait olduğu okunmadan görülmeli. Girinti tek
   kat — üçüncü kat zaten açılmıyor. */
.yr-bolum{margin-top:22px; border-top:1px solid var(--cizgi); padding-top:18px}
.yr-bolum h2{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:17px; margin:0 0 14px;
}
.yr-liste{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:16px}
.yr-alt-kat{
  margin:12px 0 0 0; padding-left:14px; gap:12px;
  border-left:2px solid var(--cizgi);
}
.yr-yorum{display:grid; gap:6px}
.yr-ust{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.yr-metin{margin:0; line-height:1.55; overflow-wrap:anywhere}
.yr-alt{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.yr-alt form{margin:0}
/* Kaldırılan yorum yerinde duruyor ama sözü yok: boşluk bırakmak,
   cevabı olan ama sorusu olmayan bir konuşma bırakırdı. */
.yr-kaldirildi{opacity:.6}
.yr-kaldirildi p{margin:0}

/* Yanıt kutusu KAPALI gelir (<details>), betiksiz açılır. Otuz yorumun
   altına otuz açık metin alanı koymak sayfayı forma çevirirdi. */
.yr-ac{display:inline-block}
.yr-ac summary{
  display:inline-flex; align-items:center;
  min-height:36px; padding:6px 12px; cursor:pointer;
  font-size:14px; color:var(--murekkep-sonuk);
  border:1px solid var(--cizgi); border-radius:10px; list-style:none;
}
.yr-ac summary::-webkit-details-marker{display:none}
.yr-ac summary:hover{color:var(--murekkep); border-color:var(--murekkep-sonuk)}
.yr-ac[open] summary{margin-bottom:10px}
.yr-ac form{display:grid; gap:8px; max-width:560px}
.yr-ac textarea{width:100%}
/* ——— VİDEO ———
   Dikey video için `aspect-ratio` YAZILMIYOR: gelen video dikey de
   olabilir yatay da, ölçüyü oynatıcı kendi kaynağından alıyor.
   `max-height` ekranı kaplamasını önlüyor — *konmasaydı* uzun bir
   dikey video sayfayı tek başına doldururdu. */
.gd-video{margin:12px 0}
.gd-video video{
  width:100%; max-height:70vh; display:block;
  background:#000; border-radius:12px;
}
.gd-video.bekliyor{
  padding:22px 18px; text-align:center;
  background:rgba(143,160,184,.06);
  border:1px dashed var(--cizgi); border-radius:12px;
}
.gd-video.bekliyor p{margin:0 0 6px}
.gd-video.bekliyor p:last-child{margin:0}

/* ——— ASİSTAN ———
   Soru ile cevap AYRI okunmalı: soru sönük ve küçük, cevap asıl
   metin. *Aynı ağırlıkta olsalardı* okur hangisinin kendi sorusu
   olduğunu her seferinde ayırt etmeye çalışırdı. */
.as-form{display:grid; gap:8px; max-width:640px}
.as-form textarea{width:100%}
.as-tur{padding:14px 0; border-top:1px solid var(--cizgi)}
.as-tur:first-of-type{border-top:0}
.as-soru{
  margin:0 0 8px; color:var(--murekkep-sonuk);
  font-size:14px; overflow-wrap:anywhere;
}
.as-soru::before{content:"— "}
.as-cevap{line-height:1.6; overflow-wrap:anywhere}
.as-yeni{border-color:rgba(245,179,60,.4)}

/* ——— SES DÜĞMELERİ ———
   Betiğin eklediği düğmeler. Dokunma hedefi 44px (proje kuralı) ve
   durum hem YAZIYLA hem renkle anlatılıyor — renk tek başına, rengi
   ayırt edemeyen okura hiçbir şey söylemez. */
.as-ses-satir{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px}
.as-ses{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding:0 14px; border-radius:10px;
  border:1px solid var(--cizgi); background:transparent; cursor:pointer;
  font:inherit; font-size:14px; color:var(--murekkep);
  transition:border-color .15s, background .15s, color .15s;
}
.as-ses:hover{border-color:var(--murekkep-sonuk)}
.as-ses svg{flex:none}

/* Kayıt sürerken düğme hem doluyor hem 'Durdur' yazıyor. Nabız
   animasyonu prefers-reduced-motion ile susuyor. */
.as-ses.dinliyor{
  border-color:rgba(220,80,80,.8); color:#e06a6a;
  background:rgba(220,80,80,.08); animation:asNabiz 1.4s ease-in-out infinite;
}
.as-ses.okuyor{border-color:rgba(245,179,60,.7); color:var(--amber, #f5b33c)}
@keyframes asNabiz{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion: reduce){ .as-ses.dinliyor{animation:none} }

.as-ses-not{font-size:13px; color:var(--murekkep-sonuk); overflow-wrap:anywhere}

/* Kaynak listesi cevabın PARÇASI, dipnot değil: okurun cevabı
   doğrulayacağı tek yer burası. */
.as-kaynak{
  margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--cizgi); font-size:13.5px;
}
.as-kaynak-bas{
  display:block; margin-bottom:6px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--murekkep-sonuk);
}
.as-kaynak ul{margin:0; padding-left:18px; display:grid; gap:4px}
.as-alt{display:flex; align-items:center; gap:10px; margin-top:8px}
.as-alt form{margin:0}
.as-alt button{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13px; color:var(--murekkep-sonuk);
  text-decoration:underline;
}

/* ——— AVATAR: KARE, DAİRE DEĞİL ———
   **Bu satır bir düzeltmenin ardından yazıldı.** Avatar daireydi ve
   savunması şuydu: "okur ağının her yerinde avatar daire, kart kuralı
   gövdeler için." Kemal kapattı: *"profil fotoğrafının çerçevesi de
   kare. işimiz gücümüz kare dikdörtgen. felsefe bu. her yerde bunu
   kullanmaya çalışacağız."*

   Yani kural bir istisna listesi değil: *"kare ve dikdörtgen kartlar"*
   kimliğin kendisi ve fotoğraf da o dile uyuyor. Yuvarlaklık,
   sosyal ağ alışkanlığından geliyordu — bizim işaretimiz değil.

   Yarıçap YÜZDE: avatar üç ayrı boyda çiziliyor (32 · 40 · 72) ve
   sabit bir piksel değeri küçükte fazla, büyükte az yuvarlanırdı.
   %24 üçünde de aynı köşeyi veriyor.

   `object-fit:cover` duruyor: olmasaydı dikdörtgen bir fotoğraf
   kareye sığmak için ezilirdi. Fotoğrafı olmayan hesapta adının ilk
   harfi duruyor — *boş bir kutu* kırık görsel gibi okunur. */
.av{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:24%;
  object-fit:cover; background:rgba(143,160,184,.16);
  border:1px solid var(--cizgi); overflow:hidden;
  font-weight:600; color:var(--murekkep-sonuk);
}
.av-kucuk{width:32px; height:32px; font-size:14px}
.av-buyuk{width:72px; height:72px; font-size:28px}
/* Hesabın sol üstündeki fotoğraf ve profilin yatay künyesi (webde büyük). */
.av.av-dev{width:100%; height:auto; aspect-ratio:1; font-size:72px; border-radius:18px}
.av.av-profil{width:168px; height:168px; font-size:64px; border-radius:18px}
@media (max-width:900px){
  .av.av-dev{width:120px; font-size:44px; border-radius:24%}
  .av.av-profil{width:72px; height:72px; font-size:28px; border-radius:24%}
}
/* Açıklama satırının içindeki düğme: `.uye-alt a` altı çizili amber yazı
   veriyordu, amber düğmenin yazısı görünmüyordu. */
.uye-alt a.uye-dg{display:inline-flex; align-items:center; margin-top:4px; color:#0B1220; text-decoration:none}
.uye-kutu select{
  width:100%; font:inherit; font-size:16px; min-height:48px; padding:0 14px;
  color:var(--murekkep); background:var(--zemin);
  border:1px solid var(--cizgi); border-radius:10px;
}
.uye-kutu .hk-kapsam select{width:auto; min-height:38px; font-size:13.5px}

/* Kimlik satırı: fotoğraf solda, ad ve kullanıcı adı sağda. */
.pr-kimlik{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.pr-kimlik h1{margin:0}
.pr-kimlik p{margin:2px 0 0}
.pr-tanitim{margin:0 0 12px; line-height:1.55; overflow-wrap:anywhere}
/* Bildirme bağlantısı sönük ve en altta: bir profilde en dikkat çeken
   şey "bildir" olmamalı. Yeri belli, ağırlığı yok. */
.pr-bildir{margin:14px 0 0; font-size:13px}
.pr-bildir a{color:var(--murekkep-sonuk); text-decoration:none}
.pr-bildir a:hover{color:var(--murekkep); text-decoration:underline}
.pf-sil{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:14px}
.pf-sil input{width:auto; min-height:0}

/* ——— KEŞFET ———
   Satırlar liste, kart değil: burada okunacak bir içerik yok, gidilecek
   bir yer var. *Kart yapılsaydı* keşfet akışın kopyası gibi durur ve
   okur burada da okumaya çalışırdı. */
.kf-arama{margin:0 0 18px}
.kf-arama label{display:block; margin-bottom:6px; color:var(--murekkep-sonuk); font-size:14px}
.kf-satir{display:flex; gap:8px; max-width:520px}
.kf-satir input{flex:1; min-width:0}
.kf-liste{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px}
.kf-kisi, .kf-gonderi{border-top:1px solid var(--cizgi)}
.kf-kisi:first-child, .kf-gonderi:first-child{border-top:0}
.kf-kisi a, .kf-gonderi a{
  display:block; padding:12px 4px; min-height:44px;
  text-decoration:none; color:inherit;
}
.kf-kisi a:hover, .kf-gonderi a:hover{background:rgba(143,160,184,.06)}
/* Ad solda, sayı sağda ve AYNI SATIRDA. Bağlantı `display:block`
   olduğu için tüm satırı kaplıyordu ve sayı alta düşüyordu; `flex:1`
   ile hizaya giriyor, `min-width:0` uzun adın taşmasını kesiyor. */
.kf-kisi{display:flex; align-items:center; justify-content:space-between; gap:12px}
.kf-kisi > a{flex:1; min-width:0}
.kf-kisi > .uye-alt{padding-right:4px; white-space:nowrap; flex:none}
.kf-ust{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:4px}
/* Neden orada olduğu kartın üstünde yazıyor: sıra açıklanamıyorsa
   okur onu keyfî sayar — ve haklı olur. */
.kf-neden{
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--murekkep-sonuk);
  border:1px solid var(--cizgi); border-radius:999px; padding:1px 8px;
}

/* Bahsetme metnin içinde durur ama bağlantı olduğu belli olmalı:
   renk tek başına anlatmaz, alt çizgi de var. */
.gd-bahis{color:var(--vurgu, #F5B33C); text-decoration:underline;
  text-underline-offset:2px}
.gd-bahis:hover{text-decoration-thickness:2px}

/* Formül bloğu: okunacak bir metin değil, BAKILACAK bir şey.
   Eşit genişlikli yazı tipi satırları hizalıyor. */
.sf-formul{
  margin:12px 0; padding:12px 14px;
  background:rgba(143,160,184,.08); border:1px solid var(--cizgi);
  border-radius:10px; overflow-x:auto;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px; line-height:1.6; white-space:pre;
}

.yr-yanitla{
  display:inline-flex; align-items:center; min-height:36px; padding:6px 12px;
  font-size:14px; color:var(--murekkep-sonuk); text-decoration:none;
  border:1px solid var(--cizgi); border-radius:10px;
}

/* ——— ŞEFFAFLIK RAPORU ———
   Sayı sağda ve tek tip genişlikte: göz kolonu aşağı doğru tarayıp
   büyüğü küçüğü karşılaştırabilmeli. Rakamlar tabular — *orantısız
   rakamlar* kolonu her satırda kaydırır. */
.sf-satir{
  display:grid; grid-template-columns:1fr auto; gap:6px 14px;
  align-items:baseline; padding:9px 0;
  border-bottom:1px solid var(--cizgi);
}
.sf-satir:last-child{border-bottom:0}
.sf-ad{font-size:15px}
.sf-deger{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:16px; font-weight:600;
}
.sf-not{
  grid-column:1 / -1; font-size:13px; color:var(--murekkep-sonuk);
}




/* ——— SÖZLEŞME ONAY KUTULARI ———
   Kutu ile yazı yan yana ve yazı tıklanabilir: küçük bir kareyi
   tutturmaya çalışmak dokunmatikte en can sıkıcı iş. */
.uye-onay{
  display:flex; align-items:flex-start; gap:10px;
  margin:14px 0 0; font-size:13.5px; line-height:1.5;
  color:var(--murekkep-sonuk); cursor:pointer;
}
.uye-onay input{ margin-top:3px; width:18px; height:18px; flex:0 0 auto; cursor:pointer }
.uye-onay a{ color:var(--murekkep) }

.uye-genis{ max-width:760px }
.sozlesme-metin{ line-height:1.7; font-size:15px }
.sozlesme-metin p{ margin:0 0 14px }
.sozlesme-metin em{ color:var(--murekkep-sonuk) }

/* Hesap ekranındaki onay listesi. */
.sozlesme-durum{ margin:18px 0 0; border-top:1px solid var(--cizgi); padding-top:14px }
.sozlesme-durum li{ display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  font-size:13.5px; border-bottom:1px solid var(--cizgi) }
.sozlesme-durum .tarih{ color:var(--murekkep-sonuk); font-size:12px;
  font-variant-numeric:tabular-nums }

/* Geri alınamaz işlem: kutu da düğme de bunu söylemeli. */
.uye-tehlike{ border-color:rgba(230,45,45,.34) }
.uye-tehlike h2{ color:#E88 }
.uye-dg.tehlike{
  background:rgba(230,45,45,.14);
  border:1px solid rgba(230,45,45,.5);
  color:#F3B7B7;
}
.uye-dg.tehlike:hover{ background:rgba(230,45,45,.22) }
.uye-dg.kucuk{ padding:4px 10px; font-size:12px; width:auto; min-height:32px }

/* ═══════════════════════════════════════════════════════════
   ÖNE ÇIKARMA — MÜŞTERİ EKRANLARI
   Izgaralar `auto-fill` ile: sütun sayısı ekrana göre kendiliğinden
   değişsin, kırılma noktası yazmayalım. */
.oc-adim{
  display:flex; gap:8px; list-style:none; margin:0 0 18px; padding:0;
  flex-wrap:wrap; font-size:13px; color:var(--murekkep-sonuk);
}
.oc-adim li{display:flex; align-items:center; gap:6px}
.oc-adim li::after{content:"›"; margin-left:6px; opacity:.5}
.oc-adim li:last-child::after{content:""}
.oc-adim .no{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:999px; border:1px solid var(--cizgi); font-size:12px;
}
.oc-adim li.simdi{color:var(--murekkep); font-weight:600}
.oc-adim li.simdi .no{border-color:var(--vurgu,#E9B44C); color:var(--vurgu,#E9B44C)}
.oc-adim li.gecti .no{opacity:.6}

.oc-not{border-left:3px solid var(--cizgi); padding-left:12px}

.oc-ara{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.oc-ara input{flex:1 1 220px}

.oc-haberler{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.oc-haber{
  display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  background:var(--yuzey); border:1px solid var(--cizgi); border-radius:12px; padding:10px;
}
.oc-haber:hover{border-color:var(--murekkep-sonuk)}
.oc-haber img,.oc-gorselsiz{
  width:72px; height:54px; object-fit:cover; border-radius:8px;
  background:var(--zemin); flex:0 0 auto;
}
.oc-haber-yazi{display:flex; flex-direction:column; gap:3px; min-width:0}
.oc-baslik{font-weight:600; font-size:14.5px; line-height:1.35}

.oc-kusaklar{display:grid; gap:8px}
.oc-kusak{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  border:1px solid var(--cizgi); border-radius:12px; padding:12px;
  /* Form etiketinin büyük harf ve harf aralığı seçenek adını bölüyordu. */
  text-transform:none; letter-spacing:0; font-size:15px; color:var(--murekkep);
}
/* `.uye-kutu label` (büyük harf, harf aralığı) `.oc-kusak`tan güçlü seçici. */
.uye-kutu label.oc-kusak{text-transform:none; letter-spacing:0; font-size:15px; color:var(--murekkep); margin:0}
/* `.uye-kutu input` tam genişlik ve 48 px yükseklik veriyor; seçim düğmesi
   buna girince kutunun ortasında dev bir daire oluyordu (ekranda görüldü). */
.uye-kutu .oc-kusak input[type=radio]{
  width:20px; height:20px; min-height:0; padding:0; margin:1px 0 0;
  flex:0 0 auto; accent-color:var(--amber);
}
.oc-kusak span{display:flex; flex-direction:column; gap:2px}
.oc-kusak:has(input:checked){border-color:var(--vurgu,#E9B44C)}

.oc-sureler{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0}
.oc-sure{
  padding:7px 14px; border:1px solid var(--cizgi); border-radius:999px;
  text-decoration:none; color:var(--murekkep-sonuk); font-size:14px;
}
.oc-sure.secili{border-color:var(--vurgu,#E9B44C); color:var(--murekkep); font-weight:600}

.oc-gezinme{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.oc-gezinme a{color:var(--murekkep-sonuk); text-decoration:none}
.oc-gezinme a:hover{color:var(--murekkep); text-decoration:underline}

.oc-bar{
  display:block; height:5px; border-radius:999px; background:var(--zemin);
  overflow:hidden; margin:5px 0 3px;
}
.oc-bar > span{display:block; height:100%; background:var(--vurgu,#E9B44C)}

.oc-yil{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.oc-ay{
  display:block; padding:10px 12px; border:1px solid var(--cizgi);
  border-radius:12px; text-decoration:none; color:inherit;
}
.oc-ay:hover{border-color:var(--murekkep-sonuk)}
.oc-ay.kapali{opacity:.45}

.oc-ay-izgara{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
.oc-gun-basi{
  text-align:center; font-size:11.5px; color:var(--murekkep-sonuk);
  padding:4px 0; letter-spacing:.04em;
}
.oc-gun-hucre{
  display:block; min-height:62px; padding:6px; border-radius:10px;
  border:1px solid var(--cizgi); text-decoration:none; color:inherit; font-size:12px;
}
.oc-gun-hucre:hover{border-color:var(--murekkep-sonuk)}
.oc-gun-hucre.kapali{opacity:.4; border-style:dashed}
.oc-gun-hucre.doldu{border-color:rgba(232,105,94,.45)}
.oc-gun-hucre.bos{border:0}

.oc-izgara{display:grid; gap:6px; grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.oc-izgara form{margin:0}
/* Dokunulabilir alan 44px kuralı burada da geçerli. */
.oc-hucre{
  display:flex; flex-direction:column; gap:2px; width:100%; min-height:64px;
  padding:8px; border-radius:10px; border:1px solid var(--cizgi);
  background:var(--yuzey); color:inherit; font:inherit; font-size:12.5px;
  cursor:pointer; text-align:left;
}
.oc-hucre:hover{border-color:var(--vurgu,#E9B44C)}
.oc-hucre.kapali{opacity:.42; cursor:default; border-style:dashed; background:transparent}

.oc-ozet{display:grid; gap:8px; margin:12px 0}
.oc-ozet > div{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--cizgi);
}
.oc-ozet > div span{color:var(--murekkep-sonuk); font-size:13.5px}
.oc-satir{margin-bottom:12px}

/* ——— otomatik kurallar ve bakiye (/one-cikar/kurallar, /one-cikar/bakiye) ——— */
.oc-bakiye{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0}
.oc-bakiye > div{display:flex; flex-direction:column; gap:2px; min-width:160px; padding:12px 14px;
  border:1px solid var(--cizgi); border-radius:12px; background:var(--zemin)}
.oc-bakiye span{font-size:12.5px; color:var(--murekkep-sonuk)}
.oc-bakiye b{font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.oc-bakiye .test b{color:var(--murekkep-sonuk)}
.oc-baglar a{white-space:nowrap}
.oc-kural-bas{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap}
.oc-kural-durum{font-size:12.5px; font-weight:600; padding:4px 9px; border-radius:7px;
  border:1px solid var(--cizgi); color:var(--murekkep-sonuk); white-space:nowrap}
.oc-kural-durum.d-aktif{border-color:rgba(76,175,120,.5); color:#7FD3A2}
.oc-kural-durum.d-bekliyor{border-color:rgba(245,179,60,.5); color:var(--amber)}
.oc-kural-durum.d-reddedildi{border-color:rgba(220,84,72,.5); color:#F08A80}
.oc-kural-alt{margin:16px 0 6px; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--murekkep-sonuk)}
.oc-eslesmeler{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.oc-eslesmeler li{display:flex; flex-direction:column; gap:2px; padding:9px 11px;
  border:1px solid var(--cizgi); border-radius:10px}
.oc-eslesmeler li.s-alindi{border-color:rgba(76,175,120,.42)}
.oc-eslesmeler a{color:var(--murekkep); font-weight:600; line-height:1.35}
.oc-hareketler li{flex-direction:row; flex-wrap:wrap; justify-content:space-between; gap:4px 12px}
.oc-hareketler .arti{color:#7FD3A2}
.oc-test{font-size:11px; padding:1px 6px; border-radius:5px; border:1px solid var(--cizgi); color:var(--murekkep-sonuk)}
.oc-kural-islem{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:16px}
.oc-kural-islem form{margin:0}
.oc-kural-islem .uye-dg{margin-top:0}
.oc-kural-islem a.uye-dg{display:inline-flex; align-items:center; text-decoration:none}
.oc-kural-form h2{margin-top:24px}
.oc-kural-form select{width:100%; font:inherit; font-size:16px; min-height:48px; padding:0 12px;
  color:var(--murekkep); background:var(--zemin); border:1px solid var(--cizgi); border-radius:10px}
.oc-kural-form select:focus-visible{outline:2px solid var(--amber); outline-offset:1px}
.oc-iki{display:grid; gap:0 14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.oc-tutarlar{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); margin:10px 0}
.oc-onizleme{margin-top:20px; padding-top:16px; border-top:1px solid var(--cizgi)}
.oc-onizleme .uye-uyari{margin:8px 0}

/* ——— geniş öne çıkarma ekranları (kural, bakiye) ———
   Kemal: *"webde neden mobil gibi görünüyor, neden verimli kullanılmıyor
   sayfa."* Üyelik çerçevesi 620 px; bu ekranlar 1180 px ve iki sütun. */
.uye-sarmal.oc-genis{width:min(1180px, calc(100% - 32px))}
.oc-genis .oc-adim{margin:0}
.oc-ust-izgara{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr)); align-items:stretch}
.oc-kural-izgara{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(480px,100%),1fr)); align-items:start}
.oc-adim-izgara{display:grid; gap:16px; grid-template-columns:minmax(0,440px) minmax(0,1fr); align-items:start}
.oc-adim-izgara .oc-sol{position:sticky; top:16px}
.oc-yigin{display:flex; flex-direction:column; gap:16px}
.oc-sag h2{margin:18px 0 8px}
.oc-sag h2:first-child,.oc-sonuc-bas h2{margin-top:0}
.oc-sonuc-bos{padding:28px 8px; text-align:center}
.oc-sonuc-bos h2{margin:0 0 8px}
.oc-sonuc-bas{display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; margin-bottom:6px}
.oc-kural-form textarea{min-height:84px}
.oc-kural-form .oc-kusaklar{grid-template-columns:repeat(3,minmax(0,1fr))}
.oc-secimler{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.oc-secim-satir{display:flex; align-items:stretch; border:1px solid var(--cizgi); border-radius:12px; overflow:hidden; background:var(--zemin)}
.oc-secim-satir:has(input:checked){border-color:var(--amber); background:rgba(245,179,60,.07)}
.uye-kutu label.oc-secim{flex:1 1 auto; min-width:0; display:flex; gap:10px; align-items:center; margin:0; padding:8px 10px;
  cursor:pointer; text-transform:none; letter-spacing:0; font-size:14px; color:var(--murekkep)}
.uye-kutu .oc-secim input[type=checkbox]{width:20px; height:20px; min-height:0; padding:0; margin:0; flex:0 0 auto; accent-color:var(--amber)}
.oc-secim img,.oc-secim .oc-gorselsiz{width:56px; height:56px; border-radius:8px; object-fit:cover; flex:0 0 auto; background:#101A2A}
.oc-secim-yazi{display:flex; flex-direction:column; gap:3px; min-width:0}
.oc-secim-yazi b{font-weight:600; line-height:1.32; overflow-wrap:anywhere}
.oc-secim-ac{display:flex; align-items:center; justify-content:center; width:44px; flex:0 0 auto;
  border-left:1px solid var(--cizgi); color:var(--murekkep-sonuk); text-decoration:none; font-size:18px}
.oc-secim-ac:hover,.oc-secim-ac:focus-visible{color:var(--amber)}
.uye-dg.tam{width:100%}
.oc-daha{margin:14px 0 0; border-top:1px solid var(--cizgi); padding-top:4px}
.oc-daha summary{cursor:pointer; min-height:44px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px;
  font-weight:600; color:var(--amber); list-style:none}
.oc-daha summary::-webkit-details-marker{display:none}
.oc-daha summary::before{content:"+"; display:inline-grid; place-items:center; width:22px; height:22px;
  border:1px solid currentColor; border-radius:6px; font-weight:700}
.oc-daha[open] summary::before{content:"−"}
.oc-daha summary .uye-alt{font-weight:400}
.oc-eylem{position:sticky; top:12px; z-index:2; display:flex; gap:10px 16px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; margin:0 0 4px; padding:12px 14px; border:1px solid var(--amber); border-radius:12px;
  background:var(--yuzey,#0D1523); box-shadow:0 10px 24px rgba(0,0,0,.35)}
.oc-eylem > div{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 260px}
.oc-eylem b{font-size:17px}
.oc-eylem .uye-dg{margin-top:0}
.oc-oto,.oc-uyari-kutu,.oc-baslik-kutu{display:flex; gap:10px 16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.oc-oto{margin:12px 0; padding:12px 14px; border:1px solid var(--amber); border-radius:12px}
.oc-oto > div,.oc-uyari-kutu > div{display:flex; flex-direction:column; gap:2px; flex:1 1 240px; min-width:0}
.oc-oto .uye-dg,.oc-uyari-kutu .uye-dg,.oc-baslik-kutu .uye-dg{margin-top:0; display:inline-flex; align-items:center; text-decoration:none}
.oc-uyari-kutu{padding:14px 16px; border-radius:12px; background:rgba(220,84,72,.12); border:1px solid rgba(220,84,72,.45)}
.oc-uyari-kutu b{font-size:16px}
.oc-baslik-kutu h1{margin:0 0 4px}
/* `.uye-kutu` sütun ve ortalı; bu iki kutu yan yana, sola yaslı (ekranda görüldü). */
.uye-kutu.oc-baslik-kutu,.uye-kutu.oc-bakiye-satir{flex-direction:row; align-items:center; justify-content:space-between; text-align:left}
.oc-bakiye-satir{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; justify-content:space-between}
.oc-bakiye-satir .oc-bakiye{margin:0}
.oc-bakiye-satir .oc-kural-islem{margin-top:0}
@media (max-width:900px){
  .oc-adim-izgara{grid-template-columns:1fr}
  .oc-adim-izgara .oc-sol{position:static}
}
@media (max-width:520px){
  .oc-kural-form .oc-kusaklar{grid-template-columns:1fr}
}
.uye-dg.ikincil{background:transparent; border:1px solid var(--cizgi); color:var(--murekkep-sonuk)}

/* ——— RESMÎ HESAP İŞARETİ ———
   Renk tek başına anlatmıyor: yanında ne olduğu yazıyor. */
.gd-resmi{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; padding:2px 8px; border-radius:999px;
  color:#7FC8A9; border:1px solid rgba(127,200,169,.4);
  background:rgba(127,200,169,.08); white-space:nowrap;
}

/* ——— OKUR PROFİLİ (/uye/<kullanici_adi>) ———
   Künye bağlantısı kartın içinde duruyor ve BAĞLANTI GİBİ DURMUYOR:
   altı çizili mavi bir ad, gönderi metnini ikinci plana atardı. Fare
   üstüne gelince beliriyor — *tıklanabilir olduğunu keşfetmenin yolu
   kalsın, ama kart bir bağlantı yığınına dönmesin.* */
.gd-kunye{
  display:inline-flex; align-items:baseline; gap:8px;
  color:inherit; text-decoration:none; border-radius:6px;
}
.gd-kunye:hover .gd-yazar{text-decoration:underline; text-underline-offset:3px}
.gd-kunye:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

.pr-tepe h1{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Sayaçlar tek satırda ve tabular rakamla: profilden profile
   geçerken sayının yeri kaymasın. */
.pr-sayaclar{
  margin:2px 0 0; display:flex; flex-wrap:wrap; gap:16px;
  font-size:14px; color:var(--murekkep-sonuk);
  font-variant-numeric:tabular-nums;
}
.pr-sayac b{color:var(--murekkep); font-weight:600}
.pr-sayac.sonuk{opacity:.75}
.pr-islem{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
/* Kutunun içindeki düğmelerin üst boşluğu formdan geliyor; profilde
   düğmeler yan yana durduğu için o boşluk çift görünüyordu. */
.pr-islem .uye-dg{margin-top:0}
.pr-islem form{margin:0}
.pr-islem a.uye-dg{
  display:inline-flex; align-items:center;
  text-decoration:none; line-height:50px;
}

/* Yan sütundaki öteki simgeler görünüşünü inline niteliklerden alıyor
   (fill="none" stroke="currentColor"); okur simgesi ise ortak
   `simgeler.js`ten geldiği için o nitelikleri taşımıyor ve dolgusu
   siyah kalıyordu. Kural yalnız `.simge`ye bakıyor — inline olanlara
   dokunmuyor, yani küre simgesinin 1.5 kalınlığı yerinde kalıyor. */
.yan-ikon .simge{
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Ağım listesi: solda kim, sağda tek düğme. */
.ag-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.ag-satir{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--cizgi);
}
.ag-satir:last-child{border-bottom:0}
.ag-satir form{margin:0 0 0 auto}
.ag-satir .uye-dg{margin-top:0; min-height:40px; font-size:14px}

/* ——— BİLDİRİMLER ———
   Okunmamış rozeti amber ve KÜÇÜK: dikkat çekmeli ama bağlantının
   kendisini bastırmamalı. Sıfırken hiç basılmıyor. */
.bl-rozet{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; margin-left:6px; padding:0 5px;
  border-radius:999px; background:var(--amber); color:#0B1220;
  font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;
}
.bl-liste{display:flex; flex-direction:column; gap:2px}
.bl-satir{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-radius:12px;
  background:var(--yuzey); border:1px solid var(--cizgi);
  color:inherit; text-decoration:none;
}
a.bl-satir:hover{border-color:rgba(126,147,172,.5)}
/* Yeni olan solunda bir amber çizgiyle işaretli — renk TEK BAŞINA
   anlatmıyor, çizgi biçimin kendisi. */
.bl-satir.yeni{border-left:3px solid var(--amber)}
.bl-cumle{font-size:15px}
.bl-alinti{
  font-size:13.5px; color:var(--murekkep-sonuk);
  overflow-wrap:anywhere; flex:1 1 100%;
}
.bl-satir .gd-zaman{margin-left:auto}

/* Satır içi duruyor: .marka flex yapılınca "göz" ile <b>6</b> ayrı öğe
   sayılıyor ve aralarına boşluk giriyor — marka "göz 6" okunuyordu. */
/* 13 Eylül 2026: logo artık yalnız üç kartlı GOZ işareti, "Ainesi" yazısı
   kalktı (Kemal: *"kaldır bizdekini bunu koy, göz altı yazısını da
   kaldır"*). Harfler oyuk, koyu zemin içinden görünüyor. */
/* 15 Eylül 2026: logo Ainesi (Kemal, eski alan adının marka tescili yapılamayınca:
   ainesi.com yapacağız"); altındaki "Dijital Haber Ağı" okunsun diye 3,3em. */
.marka{display:inline-flex; align-items:center; line-height:0}
.marka-im{width:auto; height:3.3em; display:block}

/* ——— HAKKINDA FORMU ———
   Her alanın yanında kimin göreceği duruyor. *Ayrı bir "gizlilik"
   ekranına konsaydı* okur bilgiyi burada yazar, kapsamı başka yerde
   seçer ve çoğu zaman ikisini hiç birleştirmezdi. */
.hk-blok{margin:18px 0 6px; display:grid; gap:14px}
.hk-blok h3{margin:0; font-size:16px}
.hk-satir{display:grid; gap:6px}
.hk-kapsam{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--murekkep-sonuk); margin:0;
}
.hk-kapsam select{
  width:auto; min-width:200px; min-height:38px;
  border-radius:10px; font-size:13.5px;
}

/* ——— ŞERİDİN SOL UCU: ÜYENİN KENDİ FOTOĞRAFI ———
   Kemal: "üyelerin resimleri haber sayfamızdayken de alt bandın
   solunda yer alsın. onlara daha özel hissettirebilir."

   Küre ekranındaki `.serit-ben` ile AYNI kutu: 44px, 12px köşe,
   kare. *Ayrı ölçü verilseydi* okur habere girince kendi fotoğrafı
   yer ve biçim değiştirirdi — aynı köşe aynı şey olmalı. */
.serit-ben{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--cizgi);
  background:rgba(243,246,250,.04);
  color:var(--murekkep-sonuk);
  overflow:hidden; text-decoration:none;
  font-weight:600; font-size:17px; line-height:1;
  transition:color .18s ease,border-color .18s ease;
}
.serit-ben:hover{color:var(--murekkep);border-color:rgba(126,147,172,.45)}
.serit-ben svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.serit-ben img{width:100%;height:100%;object-fit:cover;display:block}
.serit-ben.fotografli{background:none}

/* ═══ AYARLAR (/ayarlar) ═══════════════════════════════════════
   Seçenekler KARE kutu: sitenin kart dili. Tarayıcının yuvarlak
   radyo düğmesi gizleniyor, seçili kutu amber çerçeveyle anlatılıyor
   ve yazısı kalınlaşıyor — renk tek başına anlatmıyor. Dokunma hedefi
   44 piksel. */
.ayar-bolum{font-size:15px; margin:22px 0 2px; letter-spacing:.02em}
.ayar-grup{border:0; margin:12px 0 0; padding:0; min-width:0}
.ayar-grup legend{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--murekkep-sonuk); padding:0; margin-bottom:6px;
}
.ayar-grup .uye-alt{margin:0 0 8px}
/* Tek sıra: dört seçenek 3+1 diye kırılınca sonuncusu öksüz kalıyordu. */
.ayar-secenekler{display:flex; gap:8px}
.ayar-secenek{
  flex:1 1 0; min-width:0;
  position:relative; display:flex; margin:0 !important;
  text-transform:none !important; letter-spacing:0 !important;
}
.ayar-secenek input{position:absolute; opacity:0; width:1px; height:1px}
.ayar-secenek span{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 12px; border-radius:10px;
  border:1px solid var(--cizgi); background:rgba(243,246,250,.04);
  color:var(--murekkep); font-size:14px; cursor:pointer; text-align:center;
}
.ayar-secenek input:checked + span{border-color:var(--amber); box-shadow:inset 0 0 0 1px var(--amber); font-weight:600}
.ayar-secenek input:focus-visible + span{outline:2px solid var(--amber); outline-offset:2px}
.ayar-anahtar{text-transform:none !important; letter-spacing:0 !important; font-size:13.5px !important}
.ayar-anahtar b{color:var(--murekkep); font-weight:600}

/* 16 Eylül 2026 (Kemal): "logo büyüsün. mobilde sağa yaslansın." kure.css'teki kuralın aynısı. */
.marka-im{height:5.4em}
/* 16 Eylül 2026 akşam (Kemal): "logoyu mobilde sola mümkün olduğunca yasla" — kure.css ile aynı. */
@media (max-width:620px){
  .marka-im{height:4.6em; margin-left:calc(-4.6em * 79 / 887)}
  .tepe{padding-left:6px}
}

/* ——— HABER DETAY: basinca ölçüleri (17 Eylül 2026) ———
   Kemal: "basınca'daki haber detay yazı boyutları, spot boyutlarını siteye uygula."
   Canlı basinca.com'dan ölçüldü (haber-sitesi, posts/[slug]):
   başlık Roboto Condensed 700 büyük harf, 30 → 36 (640px) → 44px (1024px), satır 1,1;
   giriş (spot ya da gövdenin ilk paragrafı) Roboto Condensed 700, 24 → 30px, satır 1,375,
   beyazın %90'ı; gövde Noto Serif 16px / 26px, paragraf arası 20px; sütun 48rem. */
.sarmal:has(article.haber){max-width:816px}
article.haber h1{
  font-family:var(--manset-font,"Roboto Condensed"),"Roboto Condensed","IBM Plex Sans Condensed",sans-serif;
  font-weight:var(--manset-agirlik,700);
  text-transform:uppercase;
  font-size:30px;
  line-height:1.1;
  letter-spacing:0;
  margin:12px 0 16px;
}
article.haber .spot{
  font-family:"Roboto Condensed","IBM Plex Sans Condensed",sans-serif;
  font-weight:700;
  font-size:24px;
  line-height:1.375;
  color:rgba(255,255,255,.9);
  margin:0 0 16px;
  max-width:none;
}
article.haber .govde{
  font-family:"Noto Serif",Georgia,"Times New Roman",serif;
  font-size:16px;
  line-height:26px;
  max-width:48rem;
}
article.haber .govde p{margin:0 0 20px}
article.haber .govde h2,
article.haber .govde h3{font-family:"Roboto Condensed","IBM Plex Sans Condensed",sans-serif}
@media (min-width:640px){
  article.haber h1{font-size:36px}
  article.haber .spot{font-size:30px}
}
@media (min-width:1024px){
  article.haber h1{font-size:44px}
}
@media (max-width:620px){
  article.haber .govde{font-size:16px}
}

/* ——— Bu haberi dinle (ortak/sesli-dinle.js) ——— */
.sesli-dinle{
  display:flex; align-items:center; gap:12px;
  margin:0 0 22px; padding:6px 14px 6px 6px;
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  background:rgba(255,255,255,.04);
  max-width:48rem;
}
.sesli-dinle[hidden]{display:none}
.sd-dugme{
  flex:none; width:44px; height:44px; border:0; border-radius:10px;
  background:var(--amber); color:#0B1220; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sd-dugme svg{width:16px; height:16px; fill:currentColor}
.sd-dugme .sd-durakla{display:none}
.sd-dugme.okuyor .sd-oynat{display:none}
.sd-dugme.okuyor .sd-durakla{display:block}
.sd-dugme.hazirlaniyor{opacity:.6; cursor:progress}
.sd-dugme:focus-visible,.sd-durdur:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.sd-etiket{font-size:14px; font-weight:500; color:rgba(243,246,250,.85); white-space:nowrap}
.sd-cubuk{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.15); overflow:hidden; min-width:40px}
.sd-cubuk i{display:block; height:100%; width:0; background:var(--amber); transition:width .3s}
.sd-durdur{
  flex:none; min-height:44px; padding:0 6px; border:0; background:none;
  color:var(--murekkep-sonuk); font-size:13px; cursor:pointer;
}
.sd-durdur[hidden]{display:none}

/* Google "tercih edilen kaynak" bağlantısı */
.tercih-kaynak{margin:14px 0 0; font-size:13.5px}
.tercih-kaynak a{color:var(--murekkep-sonuk); text-decoration:underline; text-underline-offset:3px}
.tercih-kaynak a:hover{color:var(--amber)}

/* Google ile devam (17 Eylül 2026) — Google'ın kendi düğme kuralı: beyaz zemin, renkli G */
.uye-dg.uye-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:1px solid #dadce0; text-decoration:none; margin-top:6px;
}
.uye-dg.uye-google:hover{filter:none; background:#f3f5f7}
.uye-google-not{font-size:13px; margin-top:8px}
.uye-ayrac{display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:var(--murekkep-sonuk); font-size:13px}
.uye-ayrac::before, .uye-ayrac::after{content:""; flex:1; height:1px; background:var(--cizgi)}

/* Tescil başvurusu satırı (kategori bağlantılarının altında) */
.kt-tescil{max-width:1280px;margin:10px auto 0;padding:0 16px;font-size:12.5px;line-height:1.5}
.kt-tescil a{color:var(--murekkep-sonuk);text-decoration:none}
.kt-tescil a:hover{color:var(--amber);text-decoration:underline}

/* Haber zenginleştirme: arka plan kutusu (sunucu/zenginlestir.js) */
.zengin{max-width:48rem;margin:28px 0 8px;padding:18px 20px;border:1px solid var(--cizgi);border-left:3px solid var(--amber);border-radius:12px;background:var(--yuzey)}
.zengin h2{margin:0 0 8px;font-family:"Roboto Condensed",sans-serif;font-size:18px;text-transform:uppercase;letter-spacing:.02em}
.zengin h3{margin:16px 0 6px;font-size:14px;color:var(--murekkep-sonuk);text-transform:uppercase;letter-spacing:.04em}
.zengin p{margin:0;font-family:"Noto Serif",serif;font-size:16px;line-height:26px}
.zg-liste{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.zg-liste a{color:var(--murekkep)}
.zg-liste a:hover{color:var(--amber)}
.zg-tarih{color:var(--murekkep-sonuk);font-size:12.5px;margin-left:4px}
.zengin .zg-not{margin-top:14px;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--murekkep-sonuk)}
.zg-not a{color:var(--murekkep-sonuk)}

/* ——— ANASAYFA DAVETİ (18 Eylül 2026) ———
   Gerekçesi sunucu/sayfa.js → anasayfaDaveti(). Üç eğik kare kürenin
   kart dilini anlatıyor; fotoğraf değil, çizim — sayfaya bayt eklemiyor.
   Dar ekranda alt alta geçiyor, düğme tam genişlik. */
.as-davet{
  display:flex; align-items:center; gap:16px;
  margin:28px auto 0; max-width:48rem; padding:16px 18px;
  border:1px solid rgba(255,198,26,.28); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,198,26,.07), rgba(255,198,26,.02));
}
.as-kartlar{ display:flex; gap:5px; flex:0 0 auto }
.as-kartlar i{
  display:block; width:22px; height:29px; border-radius:4px;
  background:linear-gradient(160deg, #1d2c47, #0e1726);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.as-kartlar i:nth-child(1){ transform:rotate(-9deg) translateY(2px) }
.as-kartlar i:nth-child(2){ transform:scale(1.14); border-color:rgba(255,198,26,.5) }
.as-kartlar i:nth-child(3){ transform:rotate(9deg) translateY(2px) }
.as-yazi{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0 }
.as-yazi b{ font-size:15.5px; color:#eaf0fa; letter-spacing:.01em }
.as-yazi span{ font-size:13.5px; color:#93a2ba; line-height:1.4 }
.as-dugme{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px; border-radius:12px;
  border:1px solid rgba(255,198,26,.6); color:#FFC61A;
  font-weight:600; font-size:14.5px; text-decoration:none;
  background:rgba(255,198,26,.07);
}
.as-dugme:hover{ background:rgba(255,198,26,.14) }
@media (max-width:620px){
  .as-davet{ flex-wrap:wrap; gap:12px; padding:14px }
  .as-yazi{ flex:1 1 60% }
  .as-dugme{ flex:1 1 100% }
}