/* ===================================================================
   YENI TASARIM - gercek panele ozel ekler.

   maket-ek.css maketin bilesen kutuphanesidir ve PAYLASILIR. Bu dosya
   yalnizca gercek panelde anlami olan seyleri tasir: tasima seridi,
   menudeki "eski" rozeti, sayfa basligi ve tasinan sayfalarin
   bilesenleri.

   Gelen Kutusu bilesenleri `mb-*` adiyla duruyor cunku bu siniflari
   URETEN JS, calisan sayfanin betiginin AYNISI - tek karakter bile
   degismesin istendi ki iki tasarim arasinda davranis farki olusmasin.
   Degisen sey yalnizca bu siniflarin gorunumu.
   =================================================================== */

/* Serit maketin .maket-serit sinifini kullanir (1e1 gorunum). */

/* --- menu: "eski" rozeti ------------------------------------------
   Hangi sayfanin tasindigini DENEMEDEN gostermek icin. Notr renk:
   bu bir uyari degil, tasima durumu. */
.yeni-eski-rozet {
  padding: .05rem .34rem; border-radius: 4px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5);
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
}

.yeni-kopya-not {
  font-size: .74rem; font-weight: 600; color: var(--bs-primary);
}
.yeni-kutu-sekme .nav-link { font-size: .82rem; }

/* ===================================================================
   GELEN KUTUSU
   =================================================================== */

/* Bootstrap sutunu DEGIL grid: calisan sayfadaki `is-reading` davranisi
   (telefonda tek bolme) ayni secicilerle calissin. */
.mb {
  display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 1.25rem; align-items: start;
}
.mb > .card { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .mb { grid-template-columns: 1fr; }
  .mb__reader { display: none; }
  .mb.is-reading .mb__list { display: none; }
  .mb.is-reading .mb__reader { display: block; }
}

/* Liste ve okuma bolmesi ayni yuksekligi paylasir - tek kisa mailde
   saga dogru bos bir sutun kalmasin (calisan sayfada da boyle). */
.mb__list .card-body { padding: 0 !important; }
.mb__reader .card-body { min-height: min(68vh, 760px); display: flex; flex-direction: column; }
.mb__reader [data-reader-empty] { margin: auto; }
.mb__reader [data-reader-content] { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.mb-iconbtn.is-busy i { display: inline-block; animation: mb-spin .9s linear infinite; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* --- suzgec cipleri (alici adrese gore) --- */
.mb-filters {
  display: flex; gap: .3rem; margin-top: .6rem;
  overflow-x: auto; scrollbar-width: none;
}
.mb-filters::-webkit-scrollbar { display: none; }
.mb-chip {
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color); background: transparent;
  color: var(--bs-secondary-color); font-size: .74rem;
  cursor: pointer; white-space: nowrap;
}
.mb-chip:hover { color: var(--bs-body-color); }
.mb-chip.is-active {
  background: var(--bs-primary); border-color: var(--bs-primary);
  color: #fff; font-weight: 600;
}

/* --- satirlar --- */
.mb-rows { max-height: min(68vh, 760px); overflow-y: auto; }
.mb-row {
  display: flex; gap: .7rem; padding: .7rem .9rem; cursor: pointer;
  border-bottom: 1px solid var(--bs-border-color);
  border-left: 3px solid transparent; transition: background .12s;
}
.mb-row:last-child { border-bottom: none; }
.mb-row:hover { background: var(--bs-tertiary-bg); }
.mb-row.is-selected {
  background: var(--bs-tertiary-bg); border-left-color: var(--bs-primary);
}
/* Okunmamis mail SOL SERITLE isaretlenir - secili olanla ayni isaret,
   farkli olan zemin. Iki durum ust uste gelebilir. */
.mb-row.is-unread { border-left-color: var(--bs-primary); }
.mb-avatar {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #fff;
}
.mb-avatar--sm { width: 26px; height: 26px; font-size: .72rem; }
.mb-row__main { min-width: 0; flex: 1; }
.mb-row__top { display: flex; align-items: baseline; gap: .5rem; }
.mb-row__sender {
  font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-row.is-unread .mb-row__sender { font-weight: 700; }
.mb-row__date {
  margin-left: auto; font-size: .72rem; color: var(--bs-secondary-color);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mb-row__subject {
  font-size: .84rem; margin-top: .15rem; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mb-row.is-unread .mb-row__subject { color: var(--bs-body-color); font-weight: 600; }
.mb-tag {
  display: inline-block; padding: .05rem .4rem; border-radius: 5px;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
  font-size: .68rem; font-weight: 600;
}

.mb-empty {
  padding: 2.6rem 1.2rem; text-align: center;
  color: var(--bs-secondary-color); font-size: .87rem;
}
.mb-empty i { display: block; font-size: 2rem; opacity: .4; margin-bottom: .5rem; }

/* --- okuma bolmesi --- */
.mb-reader__head { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--bs-border-color); }
.mb-reader__subject { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.4; }
.mb-reader__meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--bs-secondary-color);
}
.mb-reader__meta b { color: var(--bs-body-color); font-weight: 600; }
.mb-reader__body { padding: 1.1rem 1.3rem; flex: 1; overflow-y: auto; }
.mb-reader__text {
  white-space: pre-wrap; font-size: .88rem; line-height: 1.6; word-break: break-word;
}
/* Mail HTML'i sandbox'li iframe'de acilir; zemini HER ZAMAN beyaz
   cunku gonderen kendi renklerini koyu moda gore secmedi. */
.mb-reader__body iframe {
  width: 100%; min-height: min(60vh, 620px); border: 0;
  background: #fff; border-radius: 10px;
}

.mb-skeleton {
  height: 12px; border-radius: 6px; background: var(--bs-secondary-bg);
  margin-bottom: .6rem; animation: mb-pulse 1.2s ease-in-out infinite;
}
@keyframes mb-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .mb-skeleton { animation: none; }
  .mb-iconbtn.is-busy i { animation: none; }
}

/* Adres kopyalandi geri bildirimi (JS `is-copied` ekler). */
.maket-posta-adres.is-copied {
  background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.maket-posta-adres.is-copied i { opacity: 1; }

/* ===================================================================
   GUVENLIK
   =================================================================== */

/* Sifre/kimlik degeri - tek genislikli, hizalanabilir. */
.maket-kopya-deger {
  font-family: ui-monospace, Menlo, monospace; font-size: .82rem;
  word-break: break-all;
}


/* ===================================================================
   PARA BIRIMI
   Betik base.html'den oldugu gibi alindi; stil, calisan panelin ayni
   iki kuralinin Bootstrap degiskenleriyle yazilmis hali.
   =================================================================== */

/* Noktali alt cizgi: "uzerine gelince diger birimin karsiligi var"
   ipucu. Native `title` yerine anlik ozel bir kutu kullaniliyor -
   kullanici geri bildirimi (2026-08-23) native tooltip'i "kolay
   kaciriliyor" diye eledi. */
.ax-money {
  cursor: help; border-bottom: 1px dotted var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.ax-money-tip {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: 6px;
  padding: .3rem .6rem; font-size: .78rem; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.yeni-ccy {
  background: transparent; border: 0;
  font-weight: 700; font-size: .98rem; min-width: 2.2rem;
}

/* ===================================================================
   HESAP ENVANTERI
   Satir ici duzenleme iki <tr> ile yapiliyor (calisan sayfadaki
   <details> yerine): tabloda sutun hizalamasi ancak hucrelerle olur,
   maliyet sutunu hizali olmazsa toplamla goz karsilastirmasi yapilamaz.
   =================================================================== */
/* Acilan duzenleme bolmesi tablonun bir parcasi gibi degil, SATIRIN
   ALTINDAKI bir kutu gibi okunmali - yoksa hangi kayda ait oldugu
   kaybolur. */
.yeni-inv__duzen > td {
  background: var(--bs-tertiary-bg);
  border-top: 0; padding: 1rem 1.1rem 1.2rem !important;
}

/* ===================================================================
   FINANS
   =================================================================== */

/* Form icinde alan gruplari ("Hesap", "Tarihler", "Tutarlar") - calisan
   sayfadaki fin-grup__baslik'in karsiligi. Uzun satis formunda alanlarin
   hangi konuya ait oldugu bu basliklardan okunuyor. */
.maket-form__grup-baslik {
  margin: 1.1rem 0 .5rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.maket-form__grup-baslik:first-child { margin-top: 0; }

/* Uzun tablolar: sabit baslikla kaydirma. Satislar tablosu 30+ satir
   olabiliyor, baslik kaybolursa hangi sutuna baktigin anlasilmaz. */
.yeni-fin-kaydir { max-height: 70vh; overflow: auto; }
.yeni-fin-kaydir-kisa { max-height: 340px; overflow: auto; }
.yeni-fin-kaydir thead th, .yeni-fin-kaydir-kisa thead th {
  position: sticky; top: 0; z-index: 2;
}

/* Siralama basligi - calisan sayfadaki .sort-btn ile ayni davranis. */
.yeni-sirala {
  all: unset; cursor: pointer; display: inline-flex; align-items: center;
  gap: .3rem; font: inherit; font-weight: 600; color: inherit;
}
th.text-end .yeni-sirala { justify-content: flex-end; width: 100%; }
.yeni-sirala:hover { text-decoration: underline; }
.yeni-sirala:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px;
}
.yeni-sirala__ok::after { content: "\2195"; opacity: .35; font-size: .8em; }
th[aria-sort="ascending"] .yeni-sirala__ok::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .yeni-sirala__ok::after { content: "\2193"; opacity: 1; }

/* Katlanabilir alt bolumler (duzenli giderler, yukleme gecmisi, gun gun
   dokum). Varsayilan KAPALI: sayfanin asil isi ustte kalsin. */
.yeni-katla > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--bs-secondary-color); padding: .4rem 0;
  list-style: none;
}
.yeni-katla > summary::-webkit-details-marker { display: none; }
.yeni-katla > summary::before { content: "\25B8"; margin-right: .35rem; }
.yeni-katla[open] > summary::before { content: "\25BE"; }
.yeni-katla > summary:hover { color: var(--bs-body-color); }

/* Siradaki kart odemesi - sol seritli uyari kutusu. Rengi BAKIYEYE
   gore: eksi bakiye kirmizi, artida sari (dikkat ama sorun yok). */
.yeni-fin-uyari {
  padding: .75rem 1.05rem; margin-bottom: 1rem; border-radius: 8px;
  background: var(--bs-tertiary-bg); border-left: 3px solid #f0ad4e;
  font-size: .86rem;
}
.yeni-fin-uyari--kirmizi { border-left-color: #f06548; }

/* Gecmis gunler soluk - gelecek plan one cikmali. */
.yeni-fin-gecmis > td { opacity: .55; }

/* Hero'daki tutarlar beyaz zeminde degil KOYU seritte duruyor; ax-money
   noktali alt cizgisi orada gorunmez olurdu. */
.maket-finans-serit .ax-money { border-bottom-color: rgba(255, 255, 255, .35); }

/* ===================================================================
   KAYITLAR
   =================================================================== */

/* Log listesi uzun: sabit baslikla kaydirma. */
.yeni-log-kaydir { max-height: 68vh; overflow: auto; }
.yeni-log-kaydir thead th { position: sticky; top: 0; z-index: 2; }

/* Mesaj tek genislikli ve SARAR - traceback satirlari kesilmesin,
   yatay kaydirma da olusmasin. */
.yeni-log-mesaj {
  font-family: ui-monospace, Menlo, monospace; font-size: .76rem;
  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}

/* Acilan sir degeri: maskeli degerden gorsel olarak ayrilmali, yoksa
   acik mi kapali mi oldugu anlasilmaz. */
.maket-sir-acik { color: var(--bs-primary); font-weight: 600; }

/* ===================================================================
   MANUEL ILAN YUKLEME
   =================================================================== */

/* Skin cekimi senkron ve 1-4 dk suruyor: tam ekran katman, sayfanin
   donmadigini gostermek icin. Calisan sayfada da ayni desen var. */
.yeni-bekleme {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem; padding: 1rem;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .95rem; text-align: center;
}
.yeni-bekleme[hidden] { display: none; }

/* ===================================================================
   TARAMA VE KARSILASTIRMA
   =================================================================== */

/* Uzlastirma ozeti - bes sayi yan yana, etiket ustte. */
.maket-uzlastirma-hucre {
  padding: .6rem .2rem; text-align: center;
  border-right: 1px solid var(--bs-border-color);
}
.col-lg:last-child .maket-uzlastirma-hucre { border-right: 0; }
.maket-uzlastirma-hucre span {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--bs-secondary-color); margin-bottom: .2rem;
}
.maket-uzlastirma-hucre b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.maket-uzlastirma-baslik {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
  margin: 0 0 .5rem;
}

/* Nabiz: tarayici DURMUSSA atmaz - durmus bir servisin yaninda atan bir
   nabiz yanlis guven verirdi. */
.maket-tarama__nabiz--durgun { animation: none !important; opacity: .4; }

/* ===================================================================
   YAYINLAMA KURALLARI
   =================================================================== */

/* Lig izgarasi: istenen HERHANGI BIR (lig kademe) kombinasyonu tek tek
   isaretlenir - tek bir "X ve uzeri" esigi degil. */
.maket-rank-satir {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; margin-bottom: .35rem;
}
.maket-rank-satir__ad {
  width: 4.8rem; flex: 0 0 auto;
  font-size: .78rem; color: var(--bs-secondary-color);
}
.maket-rank-cip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
  font-size: .76rem; cursor: pointer; user-select: none;
}
/* Isaretli cip DOLGULU: bir bakista hangi kombinasyonlarin secili
   oldugu gorunmeli, kutucugu tek tek okumak gerekmemeli. */
.maket-rank-cip:has(input:checked) {
  background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.maket-rank-cip input { margin: 0; }
.maket-rank-cip--genis { padding: .18rem .7rem; }

/* .maket-oto__anahtar stili maket-ek.css'te tanimli (label + checkbox) -
   burada gecersiz kilinmiyor. */

/* ===================================================================
   ILAN DUZENLEME
   =================================================================== */

/* Siralanabilir kolon basligi - calisan sayfadaki .sort-link karsiligi. */
.yeni-sirala-bag {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--bs-secondary-color); text-decoration: none;
  font-weight: 600; font-size: .72rem; text-transform: uppercase;
}
.yeni-sirala-bag:hover { color: var(--bs-body-color); }
.yeni-sirala-bag.etkin { color: var(--bs-primary); }
.yeni-sirala-bag__ok { font-size: .85rem; opacity: .55; }
.yeni-sirala-bag:hover .yeni-sirala-bag__ok,
.yeni-sirala-bag.etkin .yeni-sirala-bag__ok { opacity: 1; }

/* Eylem gerektiren gorunum kartlari tiklanabilir - kart gibi degil
   BAGLANTI gibi davranmali. */
a.card:hover { border-color: var(--bs-primary); }

/* ===================================================================
   ORTAK BEKLEME SAYFASI (admin_action_progress)
   =================================================================== */

.yeni-adimlar { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 1.1rem; }
.yeni-adim { display: flex; align-items: flex-start; gap: .7rem;
  font-size: .9rem; color: var(--bs-secondary-color); }
.yeni-adim__nokta {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: .22rem;
  border-radius: 50%; border: 2px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
/* Etkin adim NABIZ ATAR - hangi adimda beklendigi belli olmali.
   prefers-reduced-motion acikken sadece dolu durur. */
.yeni-adim.etkin { color: var(--bs-body-color); font-weight: 600; }
.yeni-adim.etkin .yeni-adim__nokta {
  border-color: var(--bs-primary); background: var(--bs-primary);
  animation: yeni-nabiz 1.4s ease-in-out infinite;
}
.yeni-adim.bitti .yeni-adim__nokta {
  border-color: #22a06b; background: #22a06b;
}
@keyframes yeni-nabiz {
  50% { box-shadow: 0 0 0 5px rgba(91, 115, 232, .25); }
}
@media (prefers-reduced-motion: reduce) {
  .yeni-adim.etkin .yeni-adim__nokta { animation: none; }
}


/* --- Ilerleme sayfasi animasyonu (A7, 2026-10-07) -------------------
   Kullanicinin verdigi "Remote Working" illustrasyonu 800x800 kare;
   kart genisligi (col-lg-7) icinde oransiz buyur. Yukseklikten
   sinirlandiriliyor, genislik kendiliginden oraniyla geliyor.
   Dar ekranda daha da kisaliyor - bekleme ekrani icerigi ASAGI
   itmemeli, kullanicinin gormesi gereken sey adimlar ve sonuc. */
.yeni-ilerleme-gorsel {
  height: 190px;
  margin: -.5rem auto .25rem;
}
.yeni-ilerleme-gorsel svg { display: block; }

@media (max-width: 575px) {
  .yeni-ilerleme-gorsel { height: 140px; }
}

/* Hareket azaltma tercihinde animasyon zaten ilk karede durur
   (bkz. kabuk.html lottie baslatici) - burada ek bir sey gerekmiyor. */


/* ===================================================================
   A8 - DOKUNMA HEDEFLERI (2026-10-07)

   Kullanici: "mobil uyumluluk bizim icin cok onemli".

   OLCULDU (390px, 16 sayfa): yatay tasma HICBIR sayfada yok. Kalan tek
   sorun dokunma hedefi boyutuydu:
     etiketsiz onay kutusu   17x17   (Ilanlar 59, Yayin Kurallari 20)
     .yeni-sirala            ...x19  (Finans siralama basliklari)
     .btn-sm                 ...x22

   Olcum ONCE INCELTILDI: ilk tarama Yayin Kurallari'nda 148 kucuk hedef
   gosteriyordu, ama 128'inin ETIKETI vardi - etikete dokunmak da kutuyu
   isaretliyor, yani etkin hedef zaten buyuktu. Yalnizca ETKIN hedefi
   24px'in altinda kalanlar duzeltildi.

   NEDEN (pointer: coarse): duzeltme yalnizca DOKUNMATIK cihazlarda
   uygulanir. Masaustunde fare hassas, 17px kutu sorun degil ve tasarimi
   orada degistirmek gereksiz bir gorsel kaymadir. Dar bir pencerede
   calisan masaustu kullanicisi da etkilenmez - sinyal EKRAN GENISLIGI
   degil GIRDI TURU.

   Esik 24px: WCAG 2.2 "Target Size (Minimum)" asgarisi.
   =================================================================== */
@media (pointer: coarse) {
  /* Bootstrap varsayilani 1rem (16-17px). Dokunmatikte buyur. */
  .form-check-input {
    width: 1.5rem; height: 1.5rem; margin-top: .1rem;
  }
  /* Tablo ici satir secimi: satir yuksekligini sismesin diye biraz daha
     olculu, ama yine 24px'in uzerinde. */
  table .form-check-input {
    width: 1.5rem; height: 1.5rem; margin-top: 0;
  }

  /* Bootstrap'te .form-check-input etiketin ICINDE degil KARDESI
     (for= ile bagli), bu yuzden etiket metin yuksekliginde (19px)
     kaliyordu. Etikete dokunmak da kutuyu isaretledigi icin onun da
     24px olmasi gerekiyor. padding-left Bootstrap'in 1.5em'ine gore
     buyutulen kutuyla hizali kalsin diye ayarlandi. */
  .form-check { padding-left: 2rem; min-height: 1.5rem; }
  .form-check .form-check-input { margin-left: -2rem; }
  .form-check-label { min-height: 24px; display: inline-flex; align-items: center; }

  /* Siralama basliklari: metin yuksekligi kadardi (19px). */
  .yeni-sirala { min-height: 24px; }

  /* Kucuk dugmeler: 22px -> 24px. Dolgu degil MIN-HEIGHT, cunku dolgu
     metni de kaydirir ve hizalamayi bozar. */
  .btn-sm { min-height: 24px; }

  /* Satir ici islem dugmeleri ve goz dugmesi zaten 26px, ama kenar
     bosluklari dar - parmak icin aralarini acalim. */
  .maket-islemler { gap: .35rem; }
}


/* ===================================================================
   KABUK: .page-content flex ogesi min-width tuzagi (A8, 2026-10-07)

   .page-wrapper display:flex, .page-content ise onun flex OGESI ve
   varsayilan min-width:auto tasiyordu. Flex ogesinin min-width:auto
   degeri, ICERIGININ min-content genisliginin ALTINA inmesini ENGELLER -
   yani genis bir tablo/satir, kapsayiciyi menu genisligi kadar DISARI
   itiyordu.

   OLCULDU (1400px, JS dahil):
     finans   .page-content 1330px (= 1400 - 70 menu)  tasma 0
     ilanlar  .page-content 1400px                     tasma 70px
   Ayni kabuk, ayni CSS - fark yalnizca sayfanin icerigiydi.

   Bu depo ayni tuzagi baska yerlerde zaten biliyor
   (.maket-ust-izgara > *, .maket-kur__secim). Kabukta eksikti. */
.page-content { min-width: 0; }