/*
 * Ori Kimlik — kimlik ekranları
 * Faz 1'de kesinleşen tasarım dili. Renkler logonun kendi gradyanından ölçüldü.
 *
 * DEĞİŞMEZ KURAL: lime beyaz üstünde metin rengi OLAMAZ (1,64:1).
 * Lime ya koyu metin taşıyan bir zemindir, ya koyu zemin üstünde vurgudur.
 */

/* ==========================================================================
   TOKEN'LAR — GÜNDÜZ
   ========================================================================== */
.orik{
  --e-zemin:#FAFAF7; --e-kart:#FFFFFF; --e-metin:#101114;
  --e-gri:#5E6152; --e-cizgi:#E4E6E0; --e-alan:#FFFFFF; --e-alan-cizgi:#D6D9CF;
  --e-lime:#A2DC00; --e-lime-parlak:#BEFE00; --e-lime-koyu:#8DC300;
  --e-yesil:#547800; --e-hata:#B22C1E; --e-basari:#2E7D32;
  --e-gradyan:linear-gradient(145deg,#BEFE00 0%,#A2DC00 55%,#8DC300 100%);
  --e-panel:#101114; --e-panel-metin:#F2F3EE; --e-panel-soluk:#9AA08E;
  --e-panel-ayrac:transparent;
}

/* ==========================================================================
   TOKEN'LAR — GECE
   K8: marka paneli mürekkep KALIR, sağ taraf da mürekkebe döner.
   Ekran tek parça olur, disk tek ışık kaynağı kalır.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  .orik:not([data-orik-tema="gunduz"]){
    --e-zemin:#101114; --e-kart:#191B20; --e-metin:#F2F3EE;
    --e-gri:#9AA08E; --e-cizgi:#2A2D33; --e-alan:#181A1F; --e-alan-cizgi:#33373F;
    --e-yesil:#A2DC00; --e-hata:#FF8A7A; --e-basari:#86D08A;
    --e-panel:#101114; --e-panel-ayrac:#22252B;
  }
}
/* Ori Gece Modu ve yaygın karanlık mod işaretleri.
   Hangi işaretin kullanıldığı Faz 10'da canlıda doğrulanacak;
   şimdilik bilinen kalıpların hepsi karşılanıyor. */
.orik[data-orik-tema="gece"],
html.dark .orik:not([data-orik-tema="gunduz"]),
html[data-theme="dark"] .orik:not([data-orik-tema="gunduz"]),
body.dark-mode .orik:not([data-orik-tema="gunduz"]),
body.ori-gece .orik:not([data-orik-tema="gunduz"]){
  --e-zemin:#101114; --e-kart:#191B20; --e-metin:#F2F3EE;
  --e-gri:#9AA08E; --e-cizgi:#2A2D33; --e-alan:#181A1F; --e-alan-cizgi:#33373F;
  --e-yesil:#A2DC00; --e-hata:#FF8A7A; --e-basari:#86D08A;
  --e-panel:#101114; --e-panel-ayrac:#22252B;
}

/* ==========================================================================
   İSKELET
   ========================================================================== */
html.orik-belge, body.orik-govde{margin:0; padding:0; height:100%}
body.orik-govde{background:#101114}

.orik *,.orik *::before,.orik *::after{box-sizing:border-box}
.orik{
  display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  min-height:100vh; min-height:100dvh;
  background:var(--e-zemin); color:var(--e-metin);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.orik.orik-tekil{grid-template-columns:1fr}

@media (max-width:860px){
  .orik{grid-template-columns:1fr; min-height:0}
}

/* ==========================================================================
   MARKA PANELİ
   ========================================================================== */
.orik-marka{
  background:var(--e-panel); color:var(--e-panel-metin);
  padding:44px 40px; display:flex; flex-direction:column; gap:26px;
  position:relative; overflow:hidden; isolation:isolate;
  border-right:1px solid var(--e-panel-ayrac);
}
/* K3 — hâle fısıldar: görünmemeli, sadece köşe biraz sıcak olmalı. */
.orik-marka::before{
  content:""; position:absolute; inset:0; z-index:-2;
  /* Son durak `transparent` DEĞİL: `transparent` = rgba(0,0,0,0), yani
     tarayıcı yeşilden siyaha doğru interpolasyon yapar ve düşük opaklıkta
     görünür bir bant kenarı bırakır (uzun kayıt formunda sol panelde
     yatay çizgi olarak okunuyordu). Aynı rengin sıfır opaklığı ve araya
     serpiştirilmiş duraklar geçişi düzler. */
  background:radial-gradient(560px 560px at 22% 16%,
    rgba(162,220,0,.075) 0%,
    rgba(162,220,0,.042) 34%,
    rgba(162,220,0,.016) 58%,
    rgba(162,220,0,.005) 78%,
    rgba(162,220,0,0) 100%);
}
/* K4 — filigran: taşan dev disk.
   Sert kenar %3 opaklıkta bile leke gibi okunuyordu; kenar maskeyle eritildi. */
.orik-marka::after{
  content:""; position:absolute; z-index:-1;
  width:620px; height:620px; right:-260px; bottom:-290px; border-radius:50%;
  background:var(--e-gradyan); opacity:.022;
  -webkit-mask-image:radial-gradient(circle at center,#000 48%,rgba(0,0,0,.35) 74%,rgba(0,0,0,.08) 86%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(circle at center,#000 48%,rgba(0,0,0,.35) 74%,rgba(0,0,0,.08) 86%,rgba(0,0,0,0) 100%);
}
@media (max-width:860px){
  .orik-marka{padding:20px 22px; gap:14px; border-right:0; border-bottom:1px solid var(--e-panel-ayrac)}
  .orik-marka-bas{gap:14px}
  .orik-marka::after{width:340px; height:340px; right:-170px; bottom:-190px}
}

/* Panel başı: geri bağlantısı ÜSTTE, altında logo kilidi.
   Eskiden geri bağlantısı sol alttaydı ve yüzen eklenti düğmeleriyle
   (çerez, gece modu) çakışıyordu. Üstte durunca o çakışma sınıfı biter. */
.orik-marka-bas{display:flex; flex-direction:column; gap:22px}
.orik-marka-ust{display:flex; align-items:center; gap:14px}

/* K1 — disk logonun gradyanını taşır; düğme de aynısını taşır.
   İkisi aynı malzemeden görünür. */
.orik-disk{
  width:64px; height:64px; border-radius:50%; background:var(--e-gradyan);
  display:grid; place-items:center; flex:none; position:relative;
  animation:orik-disk-gir .45s cubic-bezier(.2,.7,.3,1) both;
}
.orik-disk img{width:100%; height:100%; display:block}
@keyframes orik-disk-gir{from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1}}
@media (prefers-reduced-motion:reduce){ .orik-disk{animation:none} }
@media (max-width:860px){ .orik-disk{width:46px; height:46px} }

/* Marka adı: ağır sans, text-transform YOK.
   lang="tr" altında "Ori" → "ORİ" olurdu. */
.orik-marka-ad{
  font-family:"IBM Plex Sans",sans-serif; font-size:23px; letter-spacing:-.005em;
  font-weight:700; line-height:1;
}
@media (max-width:860px){ .orik-marka-ad{font-size:18px} }

.orik-marka-soz{
  font-family:Newsreader,Georgia,"Times New Roman",serif; font-style:italic; font-weight:300;
  font-size:26px; line-height:1.42; letter-spacing:-.01em; margin:auto 0 0;
  max-width:19ch; text-wrap:balance;
}
@media (max-width:860px){ .orik-marka-soz{display:none} }

/* Mobilde de görünür: eskiden gizliydi ve mobil kullanıcının
   siteye dönüş yolu hiç yoktu. */
.orik-geri{
  color:var(--e-panel-soluk); text-decoration:none; font-size:13px;
  display:inline-flex; align-items:center; gap:7px; width:fit-content;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.orik-geri:hover{color:var(--e-lime); border-bottom-color:var(--e-lime)}
.orik-geri:focus-visible{outline:2px solid var(--e-lime); outline-offset:3px; border-radius:2px}

/* ==========================================================================
   FORM TARAFI
   ========================================================================== */
.orik-yan{
  padding:52px 48px; display:flex; flex-direction:column; justify-content:center;
  background:var(--e-zemin);
}
@media (max-width:860px){ .orik-yan{padding:30px 22px} }

.orik-ic{width:100%; max-width:430px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.orik[data-orik-genis="1"] .orik-ic{max-width:560px}

.orik-basi{display:flex; flex-direction:column; gap:7px}
.orik-basi h1{
  font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:400; font-size:35px;
  line-height:1.1; letter-spacing:-.022em; margin:0; color:var(--e-metin); text-wrap:balance;
}
@media (max-width:860px){ .orik-basi h1{font-size:27px} }
.orik-basi p{margin:0; color:var(--e-gri); font-size:14.5px; line-height:1.55}

.orik form{display:flex; flex-direction:column; gap:17px; margin:0}
.orik-satir{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:860px){ .orik-satir{grid-template-columns:1fr} }

/* ==========================================================================
   ALANLAR
   ========================================================================== */
.orik-alan{display:flex; flex-direction:column; gap:6px}
/* Not: .orik-onay hariç — onay kutusu metni cümledir, versal değil.
   (Faz 5'te KVKK satırı bu seçiciye takılıp baştan sona büyük harf olmuştu.) */
.orik-alan > label:not(.orik-onay){
  font-size:12px; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--e-gri);
}
.orik-zorunlu{color:var(--e-hata); margin-left:2px}

.orik-girdi{
  font:inherit; font-size:15px; width:100%; padding:12px 14px;
  background:var(--e-alan); color:var(--e-metin);
  border:1px solid var(--e-alan-cizgi); border-radius:9px;
  transition:border-color .14s, box-shadow .14s;
}
.orik-girdi::placeholder{color:var(--e-gri); opacity:.62}
.orik-girdi:hover{border-color:var(--e-gri)}
.orik-girdi:focus{outline:0; border-color:var(--e-lime-koyu); box-shadow:0 0 0 3px rgba(162,220,0,.30)}
.orik-girdi[aria-invalid="true"]{border-color:var(--e-hata); box-shadow:0 0 0 3px rgba(178,44,30,.14)}

.orik-sifre{position:relative; display:flex}
.orik-sifre .orik-girdi{padding-right:46px}
.orik-goz{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; cursor:pointer; padding:8px; border-radius:7px;
  color:var(--e-gri); display:grid; place-items:center;
}
.orik-goz:hover{color:var(--e-metin)}
.orik-goz:focus-visible{outline:2px solid var(--e-lime-koyu); outline-offset:1px}

.orik-not{font-size:12.5px; color:var(--e-gri); margin:0}
.orik-hata{font-size:12.5px; color:var(--e-hata); margin:0}

/* şifre gücü */
/* Ölçer yalnız kullanıcı yazmaya başlayınca belirir; boş formda dört gri
   çizgi olarak durmasın diye varsayılan gizli. JS yoksa hiç görünmez —
   ölçer zaten JS'siz çalışmıyor. */
.orik-guc{display:none; flex-direction:column; gap:5px}
.orik-guc.acik{display:flex}
.orik-guc-cubuk{display:flex; gap:4px}
.orik-guc-cubuk i{height:3px; flex:1; border-radius:2px; background:var(--e-cizgi)}
.orik-guc-cubuk i.dolu{background:var(--e-lime-koyu)}
.orik-guc-metin{font-size:12px; color:var(--e-gri)}

/* onay kutusu */
.orik-onay{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--e-gri)}
.orik-onay input{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:1px 0 0;
  border:1px solid var(--e-alan-cizgi); border-radius:5px; background:var(--e-alan); cursor:pointer;
  display:grid; place-items:center; transition:background .12s, border-color .12s;
}
.orik-onay input:checked{background:var(--e-gradyan); border-color:var(--e-lime-koyu)}
.orik-onay input:checked::after{
  content:""; width:9px; height:5px; border:2px solid #101114; border-top:0; border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);
}
.orik-onay input:focus-visible{outline:2px solid var(--e-lime-koyu); outline-offset:2px}
.orik-onay a{color:var(--e-yesil); text-underline-offset:2px}

/* ==========================================================================
   DÜĞMELER
   ========================================================================== */
.orik-dugme{
  font:inherit; font-size:14px; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  padding:14px 22px; border-radius:999px; border:0; cursor:pointer; width:100%;
  background:var(--e-gradyan); color:#101114; text-align:center; text-decoration:none;
  display:inline-block; transition:filter .14s, transform .08s;
}
/* KONTRAST GÜVENCESİ — !important burada bilinçli.
   Canlıda "ANA SAYFAYA DÖN" düğmesinin yazısı kayboldu: sayfada çalışan
   başka bir stil (gece modu eklentisi) `a{color:...}` kuralıyla düğmenin
   metin rengini eziyordu. Lime zeminde lime yazı = 1,64:1, yani görünmez.
   Bu kural üçüncü taraf CSS'in okunamaz metin üretmesini engelliyor;
   estetik değil, erişilebilirlik sigortası. */
.orik a.orik-dugme,
.orik button.orik-dugme,
.orik .orik-dugme:link,
.orik .orik-dugme:visited{color:#101114 !important}
.orik .orik-dugme.ikincil,
.orik a.orik-dugme.ikincil{color:var(--e-metin) !important}
.orik .orik-dugme.ikincil.yikici{color:var(--e-gri) !important}

.orik-dugme:hover{filter:brightness(1.06)}
.orik-dugme:active{transform:translateY(1px)}
.orik-dugme:focus-visible{outline:2px solid var(--e-lime-koyu); outline-offset:3px}
.orik-dugme[disabled]{opacity:.55; cursor:progress}
.orik-dugme.ikincil{
  background:transparent; color:var(--e-metin);
  border:1px solid var(--e-alan-cizgi); width:auto;
  /* Form bir flex sütunu; `width:auto` tek başına germeyi durdurmuyordu.
     İkincil eylem birincil kadar geniş durursa ikisi eşit ağırlıkta okunur. */
  align-self:flex-start;
}
.orik-dugme.ikincil:hover{border-color:var(--e-gri); filter:none}
/* Yıkıcı ikincil düğme (silme talebi): marka rengini taşımaz, ama kırmızı
   bir düğme olarak da durmaz — kullanıcı yanlışlıkla basmasın diye sakin,
   üzerine gelince niyetini açık eder. */
.orik-dugme.ikincil.yikici{color:var(--e-gri)}
.orik-dugme.ikincil.yikici:hover,
.orik-dugme.ikincil.yikici:focus-visible{color:var(--e-hata); border-color:var(--e-hata)}

/* Sekme içi bölüm başlığı. */
.orik-altbaslik{
  font-family:"IBM Plex Sans",sans-serif; font-size:15px; font-weight:600;
  letter-spacing:-.005em; color:var(--e-metin); margin:6px 0 0;
}

.orik-arasi{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
/* `.orik-bag` hem <a> hem <button> üzerinde çalışır: pencerenin
   "Okudum, kapat" düğmesi bir <button> ve tarayıcının varsayılan
   zemini/kenarlığı sırıtıyordu. */
.orik-bag{
  color:var(--e-yesil); font-size:13.5px; text-decoration:none;
  border:0; border-bottom:1px solid transparent;
  background:transparent; padding:0; font:inherit; font-size:13.5px;
  cursor:pointer;
}
.orik-bag:hover{border-bottom-color:currentColor}
.orik-bag:focus-visible{outline:2px solid var(--e-lime-koyu); outline-offset:2px; border-radius:2px}
/* Yıkıcı eylem olumlu marka rengini taşımaz. */
.orik-bag.yikici{color:var(--e-gri)}
.orik-bag.yikici:hover,.orik-bag.yikici:focus-visible{color:var(--e-hata)}

.orik-altnot{text-align:center; font-size:14px; color:var(--e-gri); margin:0}
.orik-altnot a{color:var(--e-yesil); font-weight:500; text-decoration:none; border-bottom:1px solid currentColor}

/* ==========================================================================
   ŞERİTLER
   ========================================================================== */
.orik-serit{
  display:flex; gap:11px; padding:13px 15px; border-radius:10px; font-size:13.5px; line-height:1.5;
  background:color-mix(in srgb, var(--e-lime) 12%, var(--e-kart));
  border:1px solid color-mix(in srgb, var(--e-lime) 34%, var(--e-cizgi));
  color:var(--e-metin);
}
.orik-serit.basari{
  background:color-mix(in srgb, var(--e-basari) 10%, var(--e-kart));
  border-color:color-mix(in srgb, var(--e-basari) 32%, var(--e-cizgi));
}
.orik-serit.basari svg{color:var(--e-basari)}
.orik-serit.uyari{
  background:color-mix(in srgb, var(--e-hata) 9%, var(--e-kart));
  border-color:color-mix(in srgb, var(--e-hata) 30%, var(--e-cizgi));
}
.orik-serit.onizleme{
  background:color-mix(in srgb, var(--e-gri) 10%, var(--e-kart));
  border-color:var(--e-cizgi); border-style:dashed;
}
.orik-serit svg{flex:none; margin-top:1px}
.orik-serit b{font-weight:600}
.orik-serit a{color:var(--e-yesil); font-weight:500}
/* color-mix desteklenmezse okunaklılık yine de korunsun. */
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .orik-serit{background:var(--e-kart); border-color:var(--e-cizgi)}
}

/* ==========================================================================
   HESABIM
   ========================================================================== */
.orik-sekmeler{display:flex; gap:2px; border-bottom:1px solid var(--e-cizgi); overflow-x:auto}
.orik-sekmeler a,.orik-sekmeler button{
  font:inherit; font-size:13.5px; font-weight:500; background:transparent; border:0; cursor:pointer;
  padding:11px 15px; color:var(--e-gri); border-bottom:2px solid transparent; white-space:nowrap;
  text-decoration:none;
}
.orik-sekmeler [aria-selected="true"],.orik-sekmeler [aria-current="page"]{
  color:var(--e-metin); border-bottom-color:var(--e-lime-koyu);
}
.orik-sekmeler a:focus-visible,.orik-sekmeler button:focus-visible{outline:2px solid var(--e-lime-koyu); outline-offset:-2px}

.orik-kutu{
  border:1px solid var(--e-cizgi); border-radius:12px; padding:18px; background:var(--e-kart);
  display:flex; flex-direction:column; gap:13px;
}
.orik-kutu-sat{display:flex; justify-content:space-between; gap:14px; font-size:14px; align-items:baseline}
.orik-kutu-sat > span:first-child{
  color:var(--e-gri); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.orik-kutu-sat > span:last-child{font-weight:500; text-align:right}
/* Özet kutusu bugüne kadar yalnız METİN taşıyordu; "Yazar Sayfam" satırı
   ilk bağlantıyı getirince tarayıcının varsayılan mavisi ortaya çıktı.
   Renk `--e-yesil` üstünden geliyor: gündüz derin yeşil, gece lime —
   ikisi de kontrast doğrulayıcısından geçmiş. */
.orik-kutu-sat a{
  color:var(--e-yesil); font-weight:500; text-decoration:none;
  border-bottom:1px solid currentColor; text-underline-offset:2px;
}
.orik-kutu-sat a:hover{border-bottom-color:transparent}
.orik-kutu-sat a:focus-visible{outline:2px solid var(--e-yesil); outline-offset:3px; border-radius:3px}

/* ==========================================================================
   TEKİL EKRAN (çıkış) — tek sütun, tam ekran
   ==========================================================================
   Premium his üç şeyden geliyor: cömert boşluk, tek bir odak noktası ve
   sessiz malzeme. Burada içerik dar bir sütuna alınıyor, logo bir halka
   içinde nefes alıyor, başlık serif ve büyük, eylemler dikey olarak
   sıralanıyor — yan yana iki eylem "hangisi asıl?" sorusunu doğuruyordu.
   ========================================================================== */
.orik-tekil .orik-marka{
  align-items:center; justify-content:center; text-align:center;
  gap:0; padding:80px 32px;
  min-height:100vh; min-height:100dvh;
  /* Tekil ekranda ikinci sütun yok; ayraç sağ kenarda asılı kalıyordu. */
  border-right:0; border-bottom:0;
}

/* İçeriği dar bir sütuna al: satır uzunluğu kontrol altında kalsın. */
.orik-tekil-govde{
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:420px;
}

/* Logo halkası: diskin çevresinde ince bir lime nefes. */
.orik-tekil .orik-disk{
  width:74px; height:74px;
  box-shadow:0 0 0 1px rgba(162,220,0,.28), 0 0 0 12px rgba(162,220,0,.05);
}
.orik-tekil .orik-marka-ust{flex-direction:column; gap:0}

/* Marka adı küçülüyor: bu ekranın kahramanı başlık, marka değil.
   text-transform YOK — lang="tr" altında "Ori" → "ORİ" olur ve marka adı
   bozulur. Faz 1'de konan kural; burada bir kez daha ihlal edilip
   ekranda yakalandı. Büyük harf hissini harf aralığı veriyor. */
.orik-tekil .orik-marka-ad{
  font-size:12.5px; font-weight:600; letter-spacing:.14em;
  color:var(--e-panel-soluk); margin-top:20px;
}

.orik-tekil h1{
  font-family:Newsreader,Georgia,"Times New Roman",serif; font-weight:300;
  font-size:44px; letter-spacing:-.022em; line-height:1.08;
  margin:14px 0 0; color:var(--e-panel-metin);
}
@media (max-width:600px){ .orik-tekil h1{font-size:34px} }

/* Başlıkla metni ayıran ince çizgi — lime'dan söner. */
.orik-tekil-ayrac{
  width:72px; height:1px; margin:24px 0 22px;
  background:linear-gradient(90deg, rgba(162,220,0,0), rgba(162,220,0,.55), rgba(162,220,0,0));
}

.orik-tekil .orik-tekil-metin{
  color:var(--e-panel-soluk); margin:0; max-width:44ch; font-size:15px;
  line-height:1.65; text-wrap:balance;
}

/* Eylemler DİKEY: birincil düğme, altında ikincil bağlantı. */
.orik-tekil-eylem{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-top:34px; width:100%;
}
.orik-tekil .orik-dugme{
  width:auto; min-width:230px; padding:15px 34px;
  box-shadow:0 10px 30px rgba(162,220,0,.16);
}
.orik-tekil .orik-dugme:hover{box-shadow:0 12px 36px rgba(162,220,0,.24)}

/* Tekil ekran tema ne olursa olsun KOYU paneldir. Gündüz paletinin derin
   yeşili (#547800) burada koyu üstünde koyu kalıyor ve okunmuyordu —
   bağlantı lime olmak zorunda. Renk doğrulayıcıya da test olarak eklendi. */
.orik-tekil .orik-bag{color:var(--e-lime); font-size:14px}
.orik-tekil .orik-bag:focus-visible{outline-color:var(--e-lime)}

/* Çıkış onayında form da aynı dikey akışa girer. */
.orik-tekil form.orik-tekil-eylem{margin-top:34px}

/* ==========================================================================
   ÖNİZLEME ROZETİ (Faz 2)
   ========================================================================== */
.orik-onizleme-rozet{
  position:fixed; left:0; right:0; top:0; z-index:9999;
  background:#101114; color:#BEFE00; text-align:center;
  font-size:11px; font-weight:700; letter-spacing:.12em; padding:7px 12px;
  border-bottom:1px solid #2A2D33;
}
.orik-onizleme-var .orik-marka,.orik-onizleme-var .orik-yan{padding-top:64px}


/* ==========================================================================
   YABANCI İÇERİK SÜZGECİ — ikinci savunma katmanı
   ==========================================================================
   Kabuk zaten wp_head/wp_footer çıktısından görünür HTML'i eliyor. Ama
   WPCode gibi satır içi betik enjekte eden bir eklenti kalırsa ve o betik
   ekranımıza DOM'dan bir şey sokarsa, o da burada durur.
   Canlıda görülen "417 görüntülenme" tam olarak böyle bir enjeksiyondu:
   sayaç betiği başlığın altına kendi rakamını basıyordu.
   Kendi öğelerimizin hepsi orik- ile başlar; başkası girerse görünmez. */
.orik-basi > *:not(h1):not(p){display:none !important}
.orik-ic > *:not(form):not([class^="orik-"]):not([class*=" orik-"]){display:none !important}
.orik-marka > *:not(aside):not([class^="orik-"]):not([class*=" orik-"]):not(h1):not(p){display:none !important}

/* Ekran okuyucu */
.orik-gizli{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   AYDINLATMA METNİ PENCERESİ
   ==========================================================================
   `<dialog>` kullanıyoruz: odak tuzağı, Esc ile kapanma ve arka planın
   erişilemez kalması tarayıcıdan geliyor. Kart marka dilini taşır —
   mürekkep zemin, lime vurgu — ve gündüz temada da koyu kalır ki
   pencerenin "üstte" olduğu hissi bozulmasın.
   ========================================================================== */
/* GÖRÜNÜRLÜK, [open]'A BAĞLI.
   Burada bir zamanlar koşulsuz `display:flex` vardı ve tarayıcının kendi
   `dialog:not([open]){display:none}` kuralını eziyordu: kayıt sayfası
   açılır açılmaz aydınlatma metni penceresi formun üstünde duruyordu ve
   JavaScript kapalıysa hiç kapanmıyordu. Testler yeşildi — bu yalnız
   ekran görüntüsüne bakınca görüldü. */
.orik-pencere{
  border:0; padding:0; max-width:640px; width:calc(100% - 40px);
  max-height:min(78vh, 720px);
  background:#1B1E24; color:#F2F3EE; border-radius:16px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  overflow:hidden;
}
.orik-pencere:not([open]){display:none}
.orik-pencere[open]{display:flex; flex-direction:column}
.orik-pencere::backdrop{background:rgba(8,9,11,.72); backdrop-filter:blur(3px)}
.orik-pencere[open]{animation:orik-pencere-gir .22s cubic-bezier(.2,.7,.3,1) both}
@keyframes orik-pencere-gir{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .orik-pencere[open]{animation:none} }

.orik-pencere-bas{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px 16px; border-bottom:1px solid #33383F;
}
.orik-pencere-bas h2{
  font-family:Newsreader,Georgia,serif; font-weight:400; font-size:24px;
  letter-spacing:-.015em; margin:0; color:#F2F3EE;
}
.orik-pencere-x{
  background:transparent; border:0; color:#9AA08E; cursor:pointer;
  font-size:26px; line-height:1; padding:2px 8px; border-radius:8px; flex:none;
}
.orik-pencere-x:hover{color:#F2F3EE; background:rgba(255,255,255,.06)}
.orik-pencere-x:focus-visible{outline:2px solid #A2DC00; outline-offset:2px}

.orik-pencere-govde{
  padding:20px 24px; overflow-y:auto; font-size:14.5px; line-height:1.68;
  color:#D8DBD2;
}
.orik-pencere-govde p{margin:0 0 14px}
.orik-pencere-govde p:last-child{margin-bottom:0}
.orik-pencere-govde h2,.orik-pencere-govde h3{
  font-family:"IBM Plex Sans",sans-serif; font-size:15px; font-weight:600;
  color:#F2F3EE; margin:22px 0 8px;
}
.orik-pencere-govde a{color:#BEFE00}
.orik-pencere-govde ul,.orik-pencere-govde ol{margin:0 0 14px; padding-left:20px}
.orik-pencere-govde li{margin-bottom:6px}

.orik-pencere-alt{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 24px 22px; border-top:1px solid #33383F; background:#16191E;
}
.orik-pencere-alt .orik-dugme{width:auto; padding-inline:26px}
.orik-pencere-alt .orik-bag{color:#9AA08E}
.orik-pencere-alt .orik-bag:hover{color:#F2F3EE}

@media (max-width:600px){
  .orik-pencere{max-height:86vh; border-radius:14px}
  .orik-pencere-bas{padding:18px 18px 14px}
  .orik-pencere-govde{padding:16px 18px}
  .orik-pencere-alt{padding:14px 18px 18px}
  .orik-pencere-alt .orik-dugme{width:100%}
}