/* ORTAK — sayfa bölünmesiyle gelen yeni parçalar.
   Tasarım dosyasından SONRA yüklenir ama yalnızca hiçbir tasarımda karşılığı
   olmayan sınıfları tanımlar; var olanların üstüne yazmaz. Renk ve çizgi
   kalınlığı hep tasarımın kendi değişkenlerinden gelir, böylece dört üslupta da
   uyumlu görünür. */

/* ---------- tablo ---------- */
/* min-width:0 olmadan kaydırma kabı esnek/ızgara hücresi içinde tablonun
   genişliğine kadar büyür ve kaydırmak yerine sayfayı taşırır (dolu Kasalar
   tablosu 320 px'te brütalist ve Bauhaus'ta böyle taşıyordu). */
.tablo-sar { overflow-x: auto; min-width: 0; max-width: 100%; }
.tablo {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tablo th, .tablo td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
  white-space: nowrap;
}
.tablo thead th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sonuk);
}
.tablo .say { text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; }
.tablo tbody tr:hover { background: var(--beton); }
.tablo tfoot td {
  border-bottom: 0;
  border-top: var(--kalin, 2px) solid var(--cizgi-renk, var(--murekkep));
  font-weight: 700;
}
.tablo tr.pasif { opacity: .5; }
.tablo .minik { font-size: 10px; color: var(--sonuk); font-weight: 400; }
.kasa-bag { color: inherit; font-weight: 700; }
.rozet.ince { background: none; color: var(--sonuk); border: var(--cizgi, 1px) solid var(--sonuk);
              padding: 1px 5px; margin: 0 0 0 6px; }

/* Ayarlar tablosundaki düzenlenebilir hücreler.
   Tam genişliğe yayılınca ad ile sermaye arasında koca bir boşluk kalıyor;
   tablo içeriğine göre daralsın. */
.kasa-ayar { width: auto; }
.kasa-ayar input { padding: 5px 7px; font-size: 13px; }
.kasa-ayar td:first-child input { width: 150px; }
.kasa-ayar .say input { width: 88px; text-align: right;
                        font-family: "JetBrains Mono", ui-monospace, monospace; }
/* display:flex burada hücre kutusunu bozar ve satırdan taşar — satır içi kalsın. */
.kasa-ayar .islem { white-space: nowrap; padding: 6px 10px; }
.kasa-ayar .islem > * { vertical-align: middle; }

/* ---------- bahis planı ---------- */
.plan-govde { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.plan-birim {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 20px; background: var(--sari); color: var(--sari-yazi, #000);
  border: var(--kalin, 2px) solid var(--cizgi-renk, var(--murekkep));
}
.plan-birim .etiket { color: inherit; }
.plan-sayi {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
}
.plan-sayi small { font-size: 15px; font-weight: 500; margin-left: 4px; }
.plan-tl {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px; font-weight: 700;
}
.plan-yazi { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.plan-yazi p { max-width: 62ch; }
.plan-yazi a { color: inherit; }

/* ---------- miktar çarpanları ---------- */
/* Miktar alanında etiket+giriş bir <label> içinde; alanın kendi dizilişini
   sürdürsün diye aynı sütun akışını burada devralıyor. */
.alan > label { display: flex; flex-direction: column; gap: inherit; min-width: 0; }
/* Tasarımlar ".alan > span"a etiket biçimi verir; çarpan şeridi onu almasın. */
.carpanlar {
  display: flex; gap: 0; margin-top: 6px;
  font-size: inherit; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: inherit;
}
.carpan {
  border: var(--cizgi, 1px) solid var(--sonuk); background: none; color: var(--sonuk);
  cursor: pointer; padding: 3px 9px; margin-right: -1px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em;
}
.carpan:hover { background: var(--sari); color: var(--sari-yazi, #000);
                border-color: var(--murekkep); }

/* ---------- kırılım kapsamı ---------- */
.kapsam {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
}
.kapsam .etiket { color: var(--sonuk); margin-right: 8px; }
.kapsam a { margin: 0; }
.kapsam a[aria-current="true"] { background: var(--murekkep); color: var(--kagit); }

/* İade düğmesi bütün tasarımlarda geçerli olsun diye burada: nötr, sönük ton. */
.durum button[aria-pressed="true"].i { background: var(--sonuk); color: var(--kagit); }

/* ---------- istek sürerken geri bildirim ---------- */
/* htmx istek atan öğeye .htmx-request ekler; yanıt gelene dek düğme sönük ve
   kilitli — yavaş bağlantıda "tıkladım, bir şey olmadı" hissi ve çift gönderim
   bunun sayesinde biter. */
.htmx-request { cursor: progress; }
form.htmx-request button, a.htmx-request, form.htmx-request .dugme {
  opacity: .55; pointer-events: none;
}

/* ---------- satırda düzenleme ---------- */
/* Lig artık satırda değiştirilebilir bir seçici; rozet görünümünü korur. */
select.lig-sec {
  width: auto; max-width: 150px;
  border: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
  background: var(--beton); color: var(--sonuk);
  padding: 1px 4px; border-radius: 2px; cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: 2px; margin-right: 7px;
}
/* Oran ve miktar: değere dokununca giriş olduğu belli olan sessiz kutular. */
input.oran-giris, input.miktar-giris {
  border: var(--cizgi, 1px) solid transparent; background: none; color: inherit;
  padding: 1px 3px; border-radius: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: inherit;
  -moz-appearance: textfield; appearance: textfield;
}
input.oran-giris::-webkit-inner-spin-button, input.miktar-giris::-webkit-inner-spin-button,
input.oran-giris::-webkit-outer-spin-button, input.miktar-giris::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
input.oran-giris { width: 58px; }
input.miktar-giris { width: 58px; text-align: right; margin-right: 3px; }
input.oran-giris:hover, input.miktar-giris:hover,
input.oran-giris:focus-visible, input.miktar-giris:focus-visible {
  border-color: var(--sonuk);
}

/* ---------- hareket listesi sayfalaması ---------- */
.sayfalama {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 16px;
  border-top: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
}

/* ---------- kopya kasa: oran giriş adımı ---------- */
input.oran-tablo {
  width: 84px; text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.kopya-alt { display: flex; justify-content: flex-end; gap: 8px; }

/* Yeni kasa formundaki kopya seçici tam satıra yayılmasın. */
.tanim-ekle select { width: auto; flex: 0 1 auto; }
.tanim-ekle .onay { align-self: center; flex: 0 0 auto; white-space: nowrap; }

/* Kasa sekmeleri hiçbir tasarımda ekrandan taşamaz: kasa sayısı artınca satır
   sarar. Tasarımların çoğu .kasa-secim'i sarmasız tek satır kuruyor; ortak.css
   her tasarımdan SONRA yüklendiği için bu kural hepsinde son söz olur. */
.kasa-secim { flex-wrap: wrap; min-width: 0; }

/* Üst bandın net rakamı: kasa sekmesinin içinde küçük kalır. */
.kasa-sekme .net { opacity: .8; }
.kasa-sekme[aria-current="true"] .net { opacity: 1; }
/* Sekme etkin renk (sarı ya da mürekkep) üstünde kâr/zarar rengi okunmaz. */
.kasa-sekme[aria-current="true"] .net.arti,
.kasa-sekme[aria-current="true"] .net.eksi,
.kasa-sekme:hover .net.arti,
.kasa-sekme:hover .net.eksi { color: inherit; }

@media (max-width: 820px) {
  .plan-govde { gap: 16px; }
  .plan-sayi { font-size: 34px; }
}

/* ---------- dar ekranda tablolar ---------- */
/* Telefonda tablo yana kaydırılarak okunmaz; ikincil sütunlar gizlenir,
   kalanlar ekrana sığar. Ayrıntı zaten kasanın kendi sayfasında. */
@media (max-width: 620px) {
  .tablo .dar-gizle { display: none; }
  .tablo th, .tablo td { padding: 8px 10px; }
  .tablo td:first-child { white-space: normal; }
  .kasa-ayar td:first-child input { width: 100px; }
  .kasa-ayar .say input { width: 64px; }
  /* Satır sağı (oran + 4 durum düğmesi + kâr + sil) dar ekranda sarabilsin —
     sade kendi bloğunda yapıyor, öbür dört tasarım bunu buradan alır. */
  .satir .sag { flex-wrap: wrap; row-gap: 4px; }
}

/* ---------- satırda maç saati ---------- */
/* Oran/miktar kutularıyla aynı sessiz görünüm; tarayıcının saat ok tuşları
   satırı şişirmesin diye gizlenir. */
input.saat-giris {
  border: var(--cizgi, 1px) solid transparent; background: none; color: inherit;
  padding: 1px 3px; border-radius: 2px; width: 60px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: inherit;
}
input.saat-giris:hover, input.saat-giris:focus-visible { border-color: var(--sonuk); }
input.saat-giris::-webkit-calendar-picker-indicator { display: none; }
/* Saat girilmemişse alan boş görünür; dolu olanla karışmasın diye soluk. */
input.saat-giris:invalid, input.saat-giris:placeholder-shown { color: var(--sonuk); }

/* ---------- kullanıcı ve çıkış ---------- */
/* Düğmenin görünümü tasarımdan gelir (.tema-dugme sınıfını da taşır): sade ve
   Memphis'te çerçeveli, İsviçre ve Bauhaus'ta düz yazı — her tasarımın kendi
   kontrol dili. Burada yalnızca yerleşim ayarlanır. */
.cikis-form { display: flex; margin-right: 6px; }
.cikis-dugme { white-space: nowrap; }
/* Kullanıcı adı düz yazı değil, tıklanabilir bir kontrol: baş harfi
   yuvarlakta, adı yanında. Görünümü .tema-dugme'den gelir, yani her tasarım
   onu kendi kontrol diliyle çizer. */
.kullanici-adi {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; white-space: nowrap; margin-right: 2px;
  /* Dar tut: bu kontrol büyüyünce üst bant sarıyor ve kasa sekmeleri
     ikinci satıra düşüyor (ölçüldü: 36 px → 89 px, İsviçre'de h67 → h111). */
  padding-left: 6px; padding-right: 6px;
}
/* Ad yalnız gerçekten yer varken; altında rozet kimliği zaten söylüyor. */
.kullanici-ad-yazi { display: none; }
@media (min-width: 1400px) { .kullanici-ad-yazi { display: inline; } }
.kullanici-bas {
  flex: 0 0 auto;
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--murekkep); color: var(--yuzey);
  font-size: 10px; font-weight: 700; line-height: 1;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.kullanici-adi:hover .kullanici-bas { background: var(--sonuk); }

/* ---------- giriş ekranı ---------- */
.giris-sayfa {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  /* Tasarımların .sayfa dolgusu (alttan 40-120 px) kutuyu yukarı itiyordu;
     giriş ekranı tek işli bir sayfa, o dolguya ihtiyacı yok. */
  padding: 24px; gap: 0;
}
.giris-kutu {
  width: 100%; max-width: 360px;
  border: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
  background: var(--yuzey); padding: 28px 24px 24px;
  border-radius: var(--yuvarlak, 0);
}
.giris-kutu .marka { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.giris-alt { color: var(--sonuk); font-size: 13px; margin: 6px 0 20px; }
.giris-form { display: flex; flex-direction: column; gap: 14px; }
.giris-form .dugme { margin-top: 4px; }
/* iOS 16px altındaki girişe odaklanınca sayfayı yakınlaştırıp öyle bırakır. */
@media (max-width: 620px) {
  .giris-form input { font-size: 16px; }
  /* Dar ekranda ad yer kaplamasın; çıkış tema düğmesinin yanında kalsın
     (sade telefonda .tema-dugme'ye order:2 veriyor, form da onu izlesin). */
  .kullanici-adi { display: none; }
  .cikis-form { order: 2; }
}

/* ---------- form alanları dar ekranda daralabilsin ---------- */
/* Izgara hücresinin varsayılan min-width'i "auto"dur: içindeki input kendi
   iç genişliğinin (yaklaşık 20 karakter) altına inemez ve hücreyi ekran
   dışına taşırır. Tasarımların bir kısmı bunu kendi içinde çözüyor, bir
   kısmı çözmüyor; ortak.css hepsinden sonra yüklendiği için son söz burada.
   Kural yalnızca DARALMAYA izin verir, hiçbir şeyi genişletmez. */
.yeni .alan, .yeni .alan > label { min-width: 0; }
.yeni .alan input, .yeni .alan select { min-width: 0; max-width: 100%; }
/* Uzun etiket de hücreyi geremesin: tasarımların çoğu etiketi tek satıra
   sabitliyor, dar ekranda satır kırılması taşmaya yeğdir. */
.yeni .alan > span, .yeni .alan > label > span { white-space: normal; overflow-wrap: anywhere; }

/* Parola alanları dar ekranda 12 sütunluk ızgaraya sığmaz: sütun boşlukları
   (11 × ~24px) tek başına 264px yer kaplıyor, kart 320px ekranı taşırıyordu.
   Telefonda ızgarayı bırakıp alanları alt alta diziyoruz. Kural yalnızca bu
   forma bakar; öteki formların düzenine dokunulmaz. */
@media (max-width: 620px) {
  .hesap-form { display: flex; flex-direction: column; }
  .hesap-form .alan { grid-column: auto; width: 100%; }
  .hesap-form .dugme { align-self: flex-start; }
}

/* Tanım satırı (lig / tür / takım) 320px'te kabına sığmıyordu: içindeki ad
   girişi kendi iç genişliğinin altına inemiyor, esnek öğe de min-width:auto
   ile onu taşıyordu. Yalnız daralmaya izin verir. */
.tanim { min-width: 0; }
.tanim input { min-width: 0; }
/* Telefonda ad girişi + düğmeler tek satıra sığmazsa alta sarsın. */
@media (max-width: 620px) {
  .tanim { flex-wrap: wrap; }
}

/* ---------- maç adını kopyalama ---------- */
/* Maç adı düz yazı gibi görünür — düğme kutusu, çerçeve, arka plan yok.
   Tıklanabilirliği yalnızca imleç ve üzerine gelince çıkan alt çizgi belli
   eder; kopyalandığını sağ alttaki bildirim söyler. */
.mac-kopya {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; margin: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none; box-shadow: none;
  cursor: pointer; text-align: left; display: inline;
}
.mac-kopya:hover, .mac-kopya:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}

/* Kırılım sekmeleri dar ekranda tek satıra sığmayınca sayfayı yana çekiyordu
   (brütalist tasarımda 320 px'te 45 px taşma). Sarsınlar. */
.sekmeler { flex-wrap: wrap; min-width: 0; }

/* ---------- yeni bahis formu: satır başına üç alan ---------- */
/* Tasarımlar 12 sütunluk ızgara kuruyor; .uc üçte bir yer kaplar.
   ortak.css hepsinden sonra yüklendiği için beş tasarımda da aynı düzen. */
.alan.uc { grid-column: span 4; }
/* Bahis türü tek hücrede ikiye bölünür: market + seçim. Hücre satırın en
   uzun alanı kadar uzuyor; flex-start olmazsa çift aşağı kayıp komşu
   alanların etiket hizasını kaçırıyor. */
.alan.ikili { flex-direction: row; gap: 8px; align-items: flex-start; }
.alan.ikili > label { flex: 1 1 0; min-width: 0; }
.alan.ikili input { width: 100%; }

/* ---------- defter satırında market ve seçim ---------- */
.satir .market { font-weight: 600; }
select.secim-sec {
  width: auto; max-width: 190px;
  border: var(--cizgi, 1px) solid transparent; background: none; color: inherit;
  padding: 1px 3px; border-radius: 2px; cursor: pointer;
  font-family: inherit; font-size: inherit;
}
select.secim-sec:hover, select.secim-sec:focus-visible { border-color: var(--sonuk); }

/* ---------- Ayarlar: markete bağlı seçimler ---------- */
.secim-market { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                padding: 6px 0; min-width: 0; }
.secim-market > .etiket { flex: 0 0 140px; }
.secim-market .tanim-liste { flex: 1 1 240px; min-width: 0; }

/* ---------- kaydetme bildirimi ---------- */
/* Bildirim renkleri bilerek tasarımdan bağımsız: bunlar defter verisi değil,
   durum işareti. İsviçre'de "kazanç" siyah, Bauhaus'ta mavi — onları kullanmak
   "oldu / olmadı" ayrımını okunmaz kılardı. */
:root {
  --bildirim-iyi: #12A150;
  --bildirim-kotu: #D92D20;
}
.bildirimler {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;                 /* arkadaki sayfa tıklanabilir kalsın */
}
.bildirim {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 13px 16px 13px 13px;
  border-radius: var(--yuvarlak, 3px);
  border: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
  border-left: 5px solid var(--bildirim-iyi);
  background: var(--yuzey); color: var(--murekkep);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  font-size: 13px; font-weight: 600; line-height: 1.35;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .18s ease, transform .18s ease;
}
.bildirim.acik { opacity: 1; transform: none; }
/* Yuvarlak rozet: metne bakmadan da "oldu mu olmadı mı" anlaşılsın. */
.bildirim::before {
  content: "✓";
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bildirim-iyi); color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.bildirim.kotu { border-left-color: var(--bildirim-kotu); color: var(--bildirim-kotu); }
.bildirim.kotu::before { content: "✕"; background: var(--bildirim-kotu); }
.bildirim-kapat {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}
@media (prefers-reduced-motion: reduce) {
  .bildirim { transition: none; }
}
@media (max-width: 620px) {
  /* Telefonda alta yaslanır ve genişliği paylaşır. */
  .bildirimler { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .bildirim { max-width: none; }
  /* Form alanları telefonda tam satır. */
  .alan.uc { grid-column: 1 / -1; }
  .alan.ikili { flex-direction: column; align-items: stretch; gap: 5px; }
  .secim-market > .etiket { flex-basis: 100%; }
}

/* ---------- onay kutusu ---------- */
/* Tarayıcının confirm() penceresi yerine sayfanın kendi dili. <dialog>:
   odak tuzağı, Esc ve arka plan karartması tarayıcıdan geliyor. */
.onay-kutu {
  border: var(--cizgi, 1px) solid var(--cizgi-renk, var(--murekkep));
  background: var(--yuzey); color: var(--murekkep);
  border-radius: var(--yuvarlak, 2px);
  padding: 20px; max-width: min(380px, calc(100vw - 32px));
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.onay-kutu::backdrop { background: rgba(0, 0, 0, .35); }
.onay-soru { margin: 0 0 18px; line-height: 1.5; font-size: 14px; }
.onay-dugmeler { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ---------- yedek listesi ---------- */
.yedek-liste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               min-width: 0; padding-top: 4px; }

/* ---------- birleştirme formu ---------- */
.birlestir-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                  min-width: 0; padding-top: 6px; }
.birlestir-form select { width: auto; flex: 1 1 150px; min-width: 0; max-width: 100%; }
.birlestir-ok { color: var(--sonuk); font-weight: 700; }

/* ---------- para birimi seçici (Genel, toplam netin yanı) ---------- */
.para-secim { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.kur-notu { padding-top: 2px; }

/* Tasarım seçici artık POST formu: <a> yerine <button>. Tasarımlar bağlantıyı
   biçimlendiriyor, düğmenin tarayıcı zırhını burada söküyoruz ki aynı görünsün. */
.tasarim-secim button {
  font: inherit; cursor: pointer; background: none;
  border: 0; -webkit-appearance: none; appearance: none;
}

/* Çevrilen tutarın altında kasanın kendi parasındaki aslı — hangi rakamın
   nereden geldiği görünsün diye. Soluk ve küçük: asıl sayı üstteki. */
.asil {
  display: block; margin-top: 1px;
  font-size: 10px; font-weight: 400; color: var(--sonuk);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
}