/* Kolay Mod — sadeleştirilmiş ana ekran.

   2026-08-17 (Barış): "ortaokula giden bir çocuğun kullanabileceği kadar
   derli toplu" bir ana ekran istendi. Gerekçesi somut: babası 73 yaşında
   ve mevcut ana sayfada (canlı terminal, Kaptan Köşkü, piyasa günlüğü,
   araç kutusu, 20 bağlantılık yan menü) kafası karışıyor.
   (Not: bu dosyada menü bölüm başlıklarının birebir metnini yazmaktan
   kaçının — testler index.html içinde o başlıkları arıyor ve buradaki
   metin de gömülü sayıldığı için yanlış yeri bulabiliyorlar.)

   Bu katman hiçbir şeyi SİLMEZ. Normal ana sayfanın üzerine geçer;
   düğmeler mevcut hızlı hesap modallarını ve sayfaları açar. Sağ üstteki
   düğmeyle tam moda geçilir, tercih cihazda hatırlanır — yani babasının
   tabletinde hep sade ekran, kendi bilgisayarında tam ekran gelir. */

.kolay-mod-ekran { display: none; }

body.kolay-mod .kolay-mod-ekran {
  display: block;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 18px 16px 90px;
}

/* Kolay moddayken normal ana sayfanın tamamı ve kabuk menüleri gizlenir.
   Gizlenen bölümler DOM'da durur — düğmeler onların içindeki kartları
   modal olarak açtığı için silinemez, yalnız görünmez olurlar. */
/* 2026-08-17 (Barış): "kolay ekranda hâlâ aynı sorun var, Kaptan Köşkü
   ile ilgili."

   BU KURAL HİÇ ÇALIŞMIYORMUŞ. Eskiden şöyleydi:

       body.kolay-mod > main#girdilerCard

   ">" DOĞRUDAN ÇOCUK demek. Ama main#girdilerCard body'nin doğrudan
   çocuğu değil, arada <div class="wrap"> var. Seçici hiçbir zaman
   eşleşmedi; Kolay Mod açıkken tam panel (Kaptan Köşkü ve bütün
   tablolar) ekranda kalmaya devam etti.

   Görünen belirti "hizasızlık"tı: Kolay Mod ekranının kendi iç payı
   (18px 16px) ile sızan panelin payı farklı olduğu için kutular
   birbirinden kaymış duruyordu. Asıl mesele hiza değil, orada
   BULUNMAMASI gereken bir şeyin bulunmasıydı.

   Kolay Mod'un tek amacı sadeleştirmek — babanın kullanabilmesi için.
   Panel gizlenmeyince o amaç en baştan gerçekleşmemiş.

   Alttaki üç seçici zaten torun seçiciydi (">" yok), onlar çalışıyordu;
   bu yüzden yan menü ve başlık kayboluyor ama ana panel duruyordu. */
body.kolay-mod main#girdilerCard,
body.kolay-mod .dal-shell-sidebar,
body.kolay-mod .dal-mobile-nav,
body.kolay-mod .dal-demo-header { display: none !important; }

body.kolay-mod { padding-left: 0 !important; }

.kolay-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border, #2a3240);
}
.kolay-marka img { width: 128px; max-width: 34vw; height: auto; object-fit: contain; }
.kolay-ust-sag { display: flex; align-items: center; gap: 10px; }
.kolay-saat { font-size: .8rem; color: var(--muted, #8b93a3); }
.kolay-mod-degistir {
  min-height: 42px; padding: 0 15px;
  border: 1px solid var(--border, #303847); border-radius: 999px;
  background: var(--bg2, #1b212c); color: var(--text, #cdd4e0);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.kolay-mod-degistir:hover { border-color: var(--accent2, #e4bd68); color: var(--accent2, #e4bd68); }

/* Fiyat panosu: külçe, çeyrek, euro. Değerler mevcut canlı terminalden
   aynalanır (bkz. dal-os-kolay-mod.js) — ikinci bir fiyat kaynağı
   oluşturulmaz, böylece iki ekran asla farklı fiyat gösteremez. */
.kolay-fiyatlar {
  /* Dört kart: HAS · külçe · çeyrek · euro. auto-fit sayesinde dar
     ekranda kendiliğinden iki veya tek sütuna iner. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 11px; margin-bottom: 16px;
}
.kolay-fiyat-kart {
  padding: 15px; border: 1px solid var(--border, #303847); border-radius: 14px;
  background: var(--bg1, #141821);
}
.kolay-fiyat-kart.doviz { border-color: #2f4356; }
/* HAS referans kartı: diğerlerinden ayrılsın ki hangisinin ham referans,
   hangisinin satılan ürün olduğu karışmasın. */
.kolay-fiyat-kart.referans { border-color: rgba(228, 189, 104, .45); background: rgba(228, 189, 104, .05); }
.kolay-fiyat-baslik {
  margin: 0 0 11px; font-size: .92rem; font-weight: 800; color: var(--accent2, #e4bd68);
}
.kolay-fiyat-kart.doviz .kolay-fiyat-baslik { color: #7fb5e6; }
.kolay-fiyat-satir {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 7px;
}
.kolay-fiyat-satir:last-of-type { margin-bottom: 0; }
.kolay-fiyat-etiket { font-size: .82rem; color: var(--muted, #8b93a3); }
.kolay-fiyat-deger {
  font-size: 1.35rem; font-weight: 800; color: var(--text, #f5f1e8);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kolay-fiyat-degisim { margin-top: 9px; font-size: .78rem; color: var(--muted, #8b93a3); }
.kolay-fiyat-degisim.artis { color: #8fe0b0; }
.kolay-fiyat-degisim.azalis { color: #f0a3a5; }

/* Büyük düğmeler. 73 yaş için ölçüler bilerek cömert: en az 104px yükseklik,
   20px başlık, altında ne işe yaradığını anlatan bir satır. */
.kolay-dugmeler {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
/* Günlük ana akış her genişlikte aynı: Satışın hemen altında Döviz.
   İki sütunlu bilgisayar/tablet görünümünde ilk sütunu bu ikili oluşturur;
   telefonda DOM sırası sayesinde yine arka arkaya görünürler. */
.kolay-dugme[data-quick-target="satisEkrani"] { grid-column: 1; grid-row: 1; }
.kolay-dugme[data-quick-target="dovizAlisSatisPanel"] { grid-column: 1; grid-row: 2; }
.kolay-dugme[data-quick-target="hurdaAlisCard"] { grid-column: 2; grid-row: 1; }
.kolay-dugme[data-quick-target="kayitliAltinListeCard"] { grid-column: 2; grid-row: 2; }
.kolay-dugme {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 104px; padding: 20px 18px; text-align: left;
  border: 1px solid var(--border, #303847); border-radius: 14px;
  background: var(--bg2, #1b212c); color: var(--text, #f5f1e8);
  font: inherit; text-decoration: none; cursor: pointer;
}
.kolay-dugme:hover { border-color: var(--accent2, #e4bd68); }
.kolay-dugme:active { transform: scale(.99); }
.kolay-dugme-simge { font-size: 1.7rem; line-height: 1; margin-bottom: 9px; color: var(--accent2, #e4bd68); }
.kolay-dugme-ad { font-size: 1.25rem; font-weight: 800; }
.kolay-dugme-alt { margin-top: 3px; font-size: .82rem; color: var(--muted, #8b93a3); }

/* En çok kullanılan iş (satış) göz ilk oraya gitsin diye dolu altın. */
.kolay-dugme.birincil {
  border: 0; background: var(--accent2, #e4bd68); color: #17120a;
}
.kolay-dugme.birincil .kolay-dugme-simge { color: #17120a; }
.kolay-dugme.birincil .kolay-dugme-alt { color: #5c4a1e; }

/* Tam moddayken üst çubukta duran "Kolay ekran" düğmesi. Altın kenarlıklı
   çünkü kaybolmaması gereken bir çıkış yolu — kullanıcı sade ekrana nasıl
   döneceğini aramak zorunda kalmamalı. */
.kolay-moda-gec {
  /* Üst çubuk üç sütunlu bir grid (aksiyonlar · logo · fiyat durumu).
     Bu düğme o sütunlardan birine girerse logoyu iter ve üstüne biner —
     ilk denemede tam bu oldu. Kendi SATIRINA alınıp tüm sütunlara
     yayılıyor; artık hiçbir ekran genişliğinde çakışamaz. */
  grid-column: 1 / -1; grid-row: 2; justify-self: center;
  min-height: 34px; margin: 4px 0 0; padding: 0 14px;
  border: 1px solid rgba(228, 189, 104, .5); border-radius: 999px;
  background: rgba(228, 189, 104, .09); color: var(--accent2, #e4bd68);
  font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.kolay-moda-gec:hover { border-color: var(--accent2, #e4bd68); background: rgba(228, 189, 104, .18); }
body.kolay-mod .kolay-moda-gec { display: none; }

.kolay-alt-satir { display: flex; gap: 10px; margin-top: 16px; }
.kolay-alt-dugme {
  flex: 1; min-height: 50px; padding: 13px;
  border: 1px solid var(--border, #303847); border-radius: 14px;
  background: transparent; color: var(--muted, #8b93a3);
  font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; text-align: center;
}
.kolay-alt-dugme:hover { border-color: var(--accent2, #e4bd68); color: var(--accent2, #e4bd68); }

/* ---------------------------------------------------------------
   Kolay moddayken AÇILAN EKRANLARIN okunabilirliği.

   2026-08-17 (Barış): "6 satış butonuna tıklandığında açılan sayfaların
   içeriğini de kolaylaştırır mısın, 73 yaşındaki biri için".

   Buradaki müdahale bilerek yalnız GÖRSEL: yazı, alan ve düğme ölçüleri
   büyütülür. Hesap mantığına, alan sırasına veya tablo içeriğine hiç
   dokunulmaz — bunlar paranın hesaplandığı ekranlar, orada yapılacak
   yapısal bir değişiklik yanlış fiyata yol açabilir.

   Ölçüler 73 yaş gözü ve parmağı için seçildi: gövde yazısı ~%15 büyük,
   girdi alanları en az 52px (Apple'ın önerdiği 44px'in üzerinde),
   sayı hücreleri kalın ve tabular — rakamlar alt alta hizalı okunur. */
body.kolay-mod .quick-modal-panel { font-size: 1.06rem; }
body.kolay-mod .quick-modal-title { font-size: 1.3rem; }

body.kolay-mod .quick-modal-panel input,
body.kolay-mod .quick-modal-panel select {
  min-height: 52px; font-size: 1.1rem; font-weight: 700;
}
body.kolay-mod .quick-modal-panel label { font-size: .95rem; }

body.kolay-mod .quick-modal-panel button { min-height: 48px; font-size: 1rem; }

body.kolay-mod .quick-modal-panel th,
body.kolay-mod .quick-modal-panel td {
  padding-top: 11px; padding-bottom: 11px; font-size: 1.02rem;
}
body.kolay-mod .quick-modal-panel td { font-variant-numeric: tabular-nums; }
body.kolay-mod .quick-modal-panel th { font-size: .88rem; }

/* Onay kutuları (satıldı işaretleri) parmakla vurulabilir olsun. */
body.kolay-mod .quick-modal-panel input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 24px;
}

/* Kapatma düğmesi kaybolmasın — 73 yaş için çıkış yolu her zaman büyük
   ve görünür olmalı. */
body.kolay-mod .quick-modal-head button { min-width: 48px; font-size: 1.15rem; }

@media (max-width: 720px) {
  .kolay-fiyatlar { grid-template-columns: 1fr; }
  .kolay-fiyat-kart { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; }
  .kolay-fiyat-baslik { grid-row: span 3; margin: 0; }
  .kolay-fiyat-degisim { grid-column: 2; margin-top: 2px; }
}
@media (max-width: 460px) {
  .kolay-mod-ekran { padding: 12px 10px 86px; }
  .kolay-dugmeler { grid-template-columns: 1fr; }
  .kolay-dugme { grid-column: 1!important; grid-row: auto!important; }
  .kolay-dugme { min-height: 88px; padding: 16px; }
}