/* Approx'un derlenmis app.min.css'inde BULUNMAYAN dekoratif kart
   siniflari - kaynak SCSS'ten (componets/_pages.scss) alindi.
   Sablonun canliligi buradan geliyor: kartlarin kose grafikleri,
   gradyanli karsilama karti vb. */
/* MADDE 6 (2026-10-12): bu kartlarin METNI BEYAZ ve okunurlugu TAMAMEN
   arka plan gorseline bagliydi. Gorsel yuklenmezse (yavas baglanti,
   onbellek temizligi, ileride bir yol degisikligi) beyaz yazi beyaz
   zeminde kalir ve ilan basligi GORUNMEZ olur - sessiz bir arıza.
   Her birine, kendi gorselinin baskin renginden ornekelenmis bir YEDEK
   zemin konuldu: gorsel gelirse ustune biner, gelmezse yazi yine okunur. */
.bg-welcome-img { background-color: rgb(61, 52, 203);
                  background-image: url('../images/extra/welcome.jpg');
                  background-position: center; background-repeat: no-repeat; background-size: cover; }
.bg-globe-img   { background-image: url('../images/extra/globe.png');
                  background-position: right; background-repeat: no-repeat; background-size: contain; }
.bg-corner-img  { background-image: url('../images/extra/corner.png');
                  background-position: right; background-repeat: no-repeat; background-size: contain; }
.bg-corner1-img { background-color: rgb(31, 39, 81);
                  background-image: url('../images/extra/corner1.png');
                  background-position: right; background-repeat: no-repeat; background-size: contain; }
.bg-grad-img    { background-image: url('../images/extra/bg-grad.png');
                  background-position: center; background-repeat: no-repeat; background-size: cover; }

/* Ikon kutusu: duz dolgu yerine kesik cizgili cerceve - demodaki
   hafif, havadar gorunumun anahtari. */
.ikon-kutu { width: 44px; height: 44px; border-radius: 10px; display: flex;
             align-items: center; justify-content: center; border: 1px dashed currentColor; }
.ikon-kutu i { font-size: 1.25rem; }

/* Maket seridi: ALTA sabit. Ustte normal akistayken fixed topbar
   (z-index 1000) ve startbar (1005) uzerine biniyordu; serit gorunuyordu
   ama ustundeki secici tiklanamiyordu. */
.maket-serit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010;
               background: #f59e0b; color: #111; font-size: .78rem; font-weight: 600;
               text-align: center; padding: .35rem .8rem; letter-spacing: .02em;
               box-shadow: 0 -2px 10px rgba(0, 0, 0, .18); }
.maket-serit a { color: #111; text-decoration: underline; }
/* Sayfanin son satiri seridin altinda kalmasin */
.page-content { padding-bottom: 96px !important; }

/* ===================================================================
   KENAR MENU
   KULLANICI SECIMI (2026-10-01): dort secenek denendi, LACIVERT secildi.
   Digerleri (koyu / marka / acik) ve ust bardaki secici kaldirildi -
   maket artik gercek halinde goruntuleniyor.

   Not: Approx'un kendi [data-startbar=dark] varyanti ikonlari #4d6089
   birakiyordu; neredeyse siyah zeminde camur gibi duruyordu ("cok solgun").
   Asagidaki degerler o kontrasti bilerek yukseltiyor.
   =================================================================== */
.startbar {
  background-image: linear-gradient(180deg, #1b2347 0%, #141a35 55%, #10142a 100%);
}
html {
  --bs-startbar-bg: #141a35;
  --bs-menu-link-color: #c9d2f2;
  --maket-ikon: #8f9dd0;
  --maket-metin-parlak: #ffffff;
  --maket-hover: rgba(255, 255, 255, .08);
  --maket-aktif: #8ea5ff;
  --maket-aktif-bg: rgba(142, 165, 255, .16);
  --maket-etiket: #6f7cab;
}

/* Aktif oge sadece metin rengiyle degil SOL CUBUK + dolgu ile belli olur. */
.startbar .startbar-menu .navbar-nav .nav-item .nav-link {
  border-radius: 8px; margin: 1px 10px; padding-left: 12px;
  transition: background-color .15s ease, color .15s ease;
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link .menu-icon { color: var(--maket-ikon); }
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover {
  background-color: var(--maket-hover); color: var(--maket-metin-parlak);
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover .menu-icon { color: var(--maket-metin-parlak); }
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active {
  background-color: var(--maket-aktif-bg);
  color: var(--maket-aktif) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--maket-aktif);
}
.startbar .startbar-menu .navbar-nav .nav-item .nav-link.active .menu-icon { color: var(--maket-aktif); }
.startbar .menu-label span { color: var(--maket-etiket); letter-spacing: .08em; }
.startbar .brand { border-bottom: 1px solid rgba(255, 255, 255, .07); }



/* Hero kartlar: panel sayfasindaki gradyanli karsilama karti begenildi
   (kullanici 2026-10-01), ayni dil Finans ve Ilanlar'a da tasindi -
   SAYFA BASINA BIR TANE, abartmadan. */
.maket-hero { border: 0; }
.maket-hero .card-body { position: relative; z-index: 1; }
/* Gradyanin ustunde acilir kutu okunur kalsin */
.maket-hero-sec {
  background-color: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.maket-hero-sec option { color: #1b2347; }

/* ===================================================================
   HAREKET / GECIS KATMANI
   KULLANICI ISTEGI (2026-10-01): "gecis animasyonlari vs daha
   tatlandirilabilir".

   Hepsi prefers-reduced-motion ile kapanir - hareket hassasiyeti olan
   biri icin sayfa aninda, animasyonsuz cizilir.
   =================================================================== */

@keyframes maket-yuksel {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes maket-suzul {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes maket-parilti {
  from { background-position: -420px 0; }
  to   { background-position: 420px 0; }
}

/* Kartlar sirayla suzulerek girer - hepsi ayni anda zipladiginda
   sayfa "patliyor" gibi duruyordu. */
.page-content .card {
  animation: maket-yuksel .42s cubic-bezier(.22, .8, .3, 1) both;
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-content .row:nth-of-type(1) .card { animation-delay: .02s; }
.page-content .row:nth-of-type(2) .card { animation-delay: .08s; }
.page-content .row:nth-of-type(3) .card { animation-delay: .14s; }
.page-content .row:nth-of-type(4) .card { animation-delay: .20s; }
.page-content .row:nth-of-type(n+5) .card { animation-delay: .26s; }

/* Uzerine gelince hafif kalkis - tiklanabilir oldugu hissi. */
.page-content .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(20, 26, 53, .13);
}

/* Hero gorselleri usul usul suzulur. */
.maket-hero img, .bg-welcome-img img { animation: maket-suzul 5.5s ease-in-out infinite; }

/* Tablo satirlari: renk ve hafif kayma birlikte. */
.table tbody tr { transition: background-color .15s ease, transform .15s ease; }
.table-hover tbody tr:hover { transform: translateX(2px); }

/* Dugmeler ve rozetler */
.btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.badge { transition: transform .15s ease; }
.card:hover .badge { transform: scale(1.04); }

/* Ikon kutulari kartla birlikte canlanir. */
.ikon-kutu { transition: transform .25s ease, border-color .25s ease; }
.card:hover .ikon-kutu { transform: rotate(-6deg) scale(1.08); border-style: solid; }

/* Kenar menu: aktif cubuk yerine kayarak oturur. */
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover { transform: translateX(2px); }
.startbar .startbar-menu .navbar-nav .nav-item .nav-link .menu-icon { transition: transform .2s ease; }
.startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover .menu-icon { transform: scale(1.12); }

/* Sayi yuklenirken parildayan yer tutucu (count-up sirasinda). */
.maket-sayi { transition: color .2s ease; }

/* 2026-10-01: kartlarin kosesine serpistirilen dekoratif illustrasyonlar
   KALDIRILDI (kullanici: "bazilari asiri uyumsuz ve hepsi formlarin sag
   alt kosesinde sacma sekilde izali"). Hepsi ayni kurala bagliydi
   (right/bottom), bu yuzden her kartta ayni noktada duruyorlardi -
   mekanik gorunuyordu; secimler de anlamsizdi (nakit akisina bitcoin,
   hesap alimlarina pano). Illustrasyon artik SADECE hero kartlarda,
   icerikle ilgili ve duzenin parcasi olarak kullaniliyor. */
.card { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .page-content .card,
  .maket-hero img, .bg-welcome-img img { animation: none !important; }
  .page-content .card, .table tbody tr, .btn, .badge, .ikon-kutu,
  .startbar .startbar-menu .navbar-nav .nav-item .nav-link {
    transition: none !important;
  }
  .page-content .card:hover, .table-hover tbody tr:hover, .btn:hover,
  .startbar .startbar-menu .navbar-nav .nav-item .nav-link:hover { transform: none !important; }
  .card:hover .ikon-kutu { transform: none !important; }
}

/* ===================================================================
   FORM VE BUTON SIMETRISI
   KULLANICI GERI BILDIRIMI (2026-10-01): "bazi formlarin yerlesimleri
   tutarsiz, butonlarinda ayni sekilde, simetrik hale getirilmeli".

   Tek kural: her formun alanlari ayni izgarada (row g-3), her formun
   KAPANISI ayni - ustten cizgili bir ayak, solda aciklama, sagda birincil
   dugme. Boylece hangi sayfada olursan ol dugme ayni yerde.
   =================================================================== */
.maket-form .row { --bs-gutter-y: 1rem; }
.maket-form .form-label { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); }
.maket-form__ayak {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--bs-border-color);
  margin-top: 1.1rem; padding-top: .95rem;
}
.maket-form__ayak .maket-form__bilgi {
  flex: 1 1 240px; font-size: .74rem; color: var(--bs-secondary-color); line-height: 1.45; margin: 0;
}
.maket-form__ayak .maket-form__dugmeler { margin-left: auto; display: flex; gap: .5rem; }
@media (max-width: 575px) {
  .maket-form__ayak .maket-form__dugmeler { margin-left: 0; width: 100%; }
  .maket-form__ayak .maket-form__dugmeler .btn { flex: 1; }
}

/* Kart basliginda duran eylemler de hep ayni hizada */
.card-header .maket-baslik-eylem { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Sekmeler: eski panelin .pg-tabs'i KOPYALANMADI (kullanici 2026-10-01:
   "eski admin paneldeki tasarimi dogrudan tasima") - yeni dilin kendi
   hap-sekmesi. */
.maket-sekme { gap: .4rem; border: 0; margin-bottom: 1rem; }
.maket-sekme .nav-link {
  border-radius: 10px; padding: .55rem 1rem; font-weight: 600; font-size: .86rem;
  color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color);
  display: flex; flex-direction: column; line-height: 1.25;
}
.maket-sekme .nav-link small { font-weight: 400; font-size: .72rem; opacity: .75; }
.maket-sekme .nav-link.active {
  color: #fff; background-color: #5b73e8; border-color: #5b73e8;
  box-shadow: 0 6px 16px rgba(91, 115, 232, .28);
}

/* ===================================================================
   DUGME VE HIZALAMA DUZELTMELERI
   KULLANICI GERI BILDIRIMI (2026-10-01): "formlarin hizalamasi kotu,
   bazi butonlarin gorunumleri kotu".
   =================================================================== */

/* Ikon-only dugmeler kare olsun - yaziyla ayni yukseklikte ama ezik degil */
.btn-group-sm > .btn, .btn-sm { line-height: 1.35; }
.btn-sm > i:only-child { font-size: 1rem; line-height: 1; }
.btn > i { vertical-align: -.1em; }

/* Tablo icindeki dugme grubu satiri yukseltmesin */
.table .btn-group-sm > .btn { padding: .25rem .5rem; }

/* Kart basligindaki eylemler dikeyde ortali, satir atlayinca sola yapismasin */
.card-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.card-header > .card-title { margin-right: .25rem; }

/* Form icindeki etiketler ayni yukseklikte baslasin - iki satira tasan
   etiket yanindaki alani asagi kaydiriyordu. */
.maket-form .form-label { min-height: 1.15rem; display: block; }

/* Siralanabilir sutun basligi: link gibi degil, baslik gibi dursun */
.maket-sirala { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.maket-sirala:hover { color: var(--bs-primary) !important; }

/* Yan yana duran kartlar ayni yukseklikte bitsin */
.row > [class*="col-"] > .card.h-100 { margin-bottom: 0; }
.row > [class*="col-"] > .card.h-100 + .card { margin-top: 1.5rem; }

/* Girdi grubu icindeki secim kutusu kenarlik cakismasi */
.input-group > .form-select:not(:first-child) { border-left: 0; }

/* ===================================================================
   KABUK OLCULERI
   KULLANICI ISTEGI (2026-10-01): "soldaki menude B2O yazinin bulundugu
   form cok buyuk, onu biraz daraltip soldaki sayfa baslarini hafif
   yukari kaydiralim".

   Approx'un ust bar yuksekligi 120px ve marka alani ondan besleniyor -
   kenar menunun tepesinde kocaman bos bir blok birakiyordu.
   =================================================================== */
.startbar .brand {
  width: auto; height: 62px; display: flex; align-items: center;
  padding: 0 20px;
}
.startbar .startbar-menu { padding-bottom: 62px; }
.startbar .startbar-collapse { height: calc(100vh - 62px); padding-top: 4px; }
/* Grup basliklari daha sik - menu yukari kayiyor */
.startbar .menu-label { padding: 12px 8px 6px 20px; }
.startbar .menu-label:first-child { padding-top: 6px; }

/* Ust bardaki para birimi secici */
.maket-ccy .btn { padding: .2rem .55rem; font-weight: 600; min-width: 34px; }
.maket-ccy .btn-check:checked + .btn {
  background-color: #5b73e8; border-color: #5b73e8; color: #fff;
}

/* Kullanici menusu: tek satir, simetrik */
.maket-kullanici { min-width: 210px; padding-top: 0; }
.maket-kullanici .dropdown-item i { width: 1.1rem; text-align: center; }

/* ===================================================================
   IKON HIZALAMASI - KOK NEDEN
   KULLANICI GERI BILDIRIMI (2026-10-02): "tasarimin genelinde ozellikle
   ikonlarin yerlesiminde kaymalar var".

   Iconoir'in temel kurali ::before'u DISPLAY:BLOCK yapiyor; bu yuzden
   her ikon kendi satirina dusup yanindaki yaziyi asagi itiyordu
   ("Yukle", "Taramayi simdi calistir" vb. iki satir goruntusu).
   Ikonu satir-ici hale getiriyoruz; boyut 1em kaliyor.
   =================================================================== */
[class^="iconoir-"], [class*=" iconoir-"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 1em; vertical-align: -.125em; flex: 0 0 auto;
}
[class^="iconoir-"]::before, [class*=" iconoir-"]::before {
  display: inline-block; width: 1em; height: 1em;
}
/* Ikon kutusu icindeki ikon ortalanmis kalsin */
.ikon-kutu i { font-size: 1.2rem; }
/* Dugme icindeki ikon ile yazi arasi bosluk ve ortalama */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.btn.text-start { justify-content: flex-start; }
.btn > i { margin: 0; }
.btn i.me-1, .btn i.me-2 { margin-right: 0 !important; }
.d-grid > .btn { width: 100%; }

/* ===================================================================
   YUMUSAK ROZET/ZEMIN RENKLERI
   Bu app.min.css derlemesinde bg-soft-* siniflari YOK - rozetler
   beyaz uzerine beyaz gibi soluk kaliyordu (ornegin firsat katsayisi
   "2,4x" neredeyse gorunmuyordu). Burada tanimlaniyor.
   =================================================================== */
.bg-soft-primary   { background-color: rgba(91, 115, 232, .13) !important; color: #4256c7 !important; }
.bg-soft-success   { background-color: rgba(34, 197, 94, .14)  !important; color: #198a4b !important; }
.bg-soft-info      { background-color: rgba(65, 203, 216, .16) !important; color: #157f8a !important; }
.bg-soft-warning   { background-color: rgba(255, 159, 67, .16) !important; color: #b96a0c !important; }
.bg-soft-danger    { background-color: rgba(239, 77, 86, .14)  !important; color: #c22f38 !important; }
.bg-soft-secondary { background-color: rgba(120, 132, 164, .15)!important; color: #52607d !important; }
:root[data-bs-theme="dark"] .bg-soft-primary   { color: #9db0ff !important; }
:root[data-bs-theme="dark"] .bg-soft-success   { color: #6ee7a4 !important; }
:root[data-bs-theme="dark"] .bg-soft-info      { color: #6fe0ea !important; }
:root[data-bs-theme="dark"] .bg-soft-warning   { color: #ffc083 !important; }
:root[data-bs-theme="dark"] .bg-soft-danger    { color: #ff9ba1 !important; }
:root[data-bs-theme="dark"] .bg-soft-secondary { color: #b3bed6 !important; }

.btn-soft-primary   { background-color: rgba(91, 115, 232, .12); color: #4256c7; border-color: transparent; }
.btn-soft-success   { background-color: rgba(34, 197, 94, .13);  color: #198a4b; border-color: transparent; }
.btn-soft-info      { background-color: rgba(65, 203, 216, .15); color: #157f8a; border-color: transparent; }
.btn-soft-warning   { background-color: rgba(255, 159, 67, .15); color: #b96a0c; border-color: transparent; }
.btn-soft-danger    { background-color: rgba(239, 77, 86, .13);  color: #c22f38; border-color: transparent; }
.btn-soft-secondary { background-color: rgba(120, 132, 164, .14);color: #52607d; border-color: transparent; }
.btn-soft-primary:hover   { background-color: rgba(91, 115, 232, .22); color: #3346b8; }
.btn-soft-success:hover   { background-color: rgba(34, 197, 94, .22);  color: #137a40; }
.btn-soft-info:hover      { background-color: rgba(65, 203, 216, .25); color: #116f79; }
.btn-soft-warning:hover   { background-color: rgba(255, 159, 67, .25); color: #a35c08; }
.btn-soft-danger:hover    { background-color: rgba(239, 77, 86, .22);  color: #ab2730; }
.btn-soft-secondary:hover { background-color: rgba(120, 132, 164, .24);color: #44506b; }
:root[data-bs-theme="dark"] .btn-soft-primary   { color: #9db0ff; }
:root[data-bs-theme="dark"] .btn-soft-success   { color: #6ee7a4; }
:root[data-bs-theme="dark"] .btn-soft-info      { color: #6fe0ea; }
:root[data-bs-theme="dark"] .btn-soft-warning   { color: #ffc083; }
:root[data-bs-theme="dark"] .btn-soft-danger    { color: #ff9ba1; }
:root[data-bs-theme="dark"] .btn-soft-secondary { color: #b3bed6; }

/* Hizli Islem gibi dikey dugme listelerinde ikon-yazi ayni satirda */
.card-body.d-grid > .btn { padding: .6rem .9rem; }

/* ===================================================================
   DUGME SATIRI VE KART ARALIGI
   KULLANICI GERI BILDIRIMI (2026-10-02).
   =================================================================== */
/* "Finansı aç" dar kartta alt alta kiriliyordu. */
.btn { white-space: nowrap; }

/* h-100 kartin alt bosluğu KOLONA verilir. Daha once sadece
   margin-bottom:0 yazmistim; o yuzden bir sonraki satir ustteki
   kartlara yapisiyordu ("formlar son yuklenenlerin uzerine cikmis"). */
.row > [class*="col-"] > .card.h-100 { margin-bottom: 0; }
.row > [class*="col-"]:has(> .card.h-100) { margin-bottom: 1.5rem; }
/* :has desteklemeyen tarayici icin guvenli yedek */
@supports not selector(:has(*)) {
  .row > [class*="col-"] > .card.h-100 { margin-bottom: 1.5rem; }
}

/* Lottie kutusu */
.maket-lottie { width: 100%; height: 100%; pointer-events: none; }
.maket-lottie svg { display: block; }


/* ===================================================================
   NET KAR KARTI (hero)
   KULLANICI GERI BILDIRIMI (2026-10-02): "hero tasarimi bok gibi olmus,
   en bastan yap, hic uyumlu degil, arka plani olsun".

   KOK NEDEN: Lottie'nin kendi paleti (beyaz / lavanta #e0d0fd / sari
   #ffc735 / indigo #7167e1) FOTOGRAF bir arka planin (welcome.jpg)
   uzerine yapistirilmisti - iki ayri gorsel dil ust uste biniyordu.

   COZUM: fotograf kaldirildi. Zemin artik animasyonun KENDI
   renklerinden turetilen bir indigo gradyan; uzerinde iki yumusak isik
   (lavanta ve sari) animasyonun vurgu renklerini tekrar ediyor. Kart,
   animasyon ve kenar menu boylece ayni ailede.
   =================================================================== */
.maket-kar-karti {
  border: 0;
  background-image:
    radial-gradient(120% 95% at 88% 18%, rgba(224, 208, 253, .30) 0%, transparent 55%),
    radial-gradient(70% 70% at 96% 88%, rgba(255, 199, 53, .22) 0%, transparent 60%),
    linear-gradient(118deg, #232a63 0%, #40379f 46%, #6a5ce2 100%);
  box-shadow: 0 14px 34px rgba(35, 42, 99, .28);
  overflow: hidden;
}
.maket-kar-karti .card-body { padding: 1.05rem 1.25rem; }

/* KULLANICI (2026-10-07): "anasayfanin ust kismindaki formlari biraz
   kisaltalim. su an cok buyuk ve kaba duruyorlar."
   BU satir tum ust bolumun yuksekligini belirliyor: izgara
   grid-auto-rows:1fr oldugu icin yanindaki kartlar da buna geriliyor,
   yani IKI SATIR birden bu olcuye uyuyor. 212 -> 150 (~%30 kisalma). */
.maket-kar-karti__ic {
  display: flex; align-items: center; gap: 1rem; min-height: 150px;
}
.maket-kar-karti__metin { flex: 1 1 56%; min-width: 162px; position: relative; z-index: 2; }

.maket-kar-karti__ust {
  color: rgba(255, 255, 255, .62); text-transform: uppercase;
  letter-spacing: .12em; font-size: .66rem; font-weight: 700; margin: 0 0 .3rem;
}
.maket-kar-karti__etiket {
  color: rgba(255, 255, 255, .80); font-size: .9rem; font-weight: 500; margin: 0;
}
.maket-kar-karti__tutar {
  color: #fff; font-weight: 700; font-size: 1.7rem; line-height: 1.1;
  letter-spacing: -.015em; margin: .05rem 0 .5rem;
  font-variant-numeric: tabular-nums;
}
.maket-kar-karti__cipler { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.maket-kar-karti__cipler span {
  background: rgba(255, 255, 255, .15); color: #fff;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px; padding: .2rem .6rem; font-size: .73rem; font-weight: 600;
}
.maket-kar-karti__dugme { box-shadow: 0 6px 16px rgba(239, 77, 86, .34); }

/* Animasyon: yumusak bir isik lekesinin icinde durur, kartin sagina
   tasar - yapistirilmis degil, zeminin parcasi gibi. */
.maket-kar-karti__gorsel {
  flex: 1 1 44%; min-width: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  position: relative; margin: -.7rem -1.1rem -.9rem 0;
}
.maket-kar-karti__gorsel::before {
  content: ""; position: absolute; inset: 8% -6% 8% -2%;
  background: radial-gradient(circle at 52% 50%, rgba(255, 255, 255, .17) 0%, transparent 68%);
  border-radius: 50%;
}
.maket-kar-karti__gorsel .maket-lottie { height: 100%; min-height: 132px; position: relative; z-index: 1; }

@media (max-width: 1199px) {
  .maket-kar-karti__tutar { font-size: 1.5rem; }
  .maket-kar-karti__ic { min-height: 138px; }
}
@media (max-width: 575px) {
  .maket-kar-karti__ic { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .maket-kar-karti__gorsel { width: 100%; margin: 0 -1rem -.6rem; }
  .maket-kar-karti__gorsel .maket-lottie { min-height: 118px; }
}

/* ===================================================================

/* ===================================================================
   UST IZGARA: hero + kodlar + dort sayac
   KULLANICI ISTEGI (2026-10-02): hero ile kodlar AYNI boyutta olsun,
   yanlarindaki ikiserli sayaclarla simetrik dursun.

   Bootstrap satirlariyla olmuyordu: sol yigin kendi icerigine gore
   uzuyor, sagdaki sayaclar dogal yuksekliginde kaliyordu. Burada tek
   bir izgara var; grid-auto-rows:1fr iki satiri da esitliyor, genis
   kartlar 2 kolon kapliyor. Kenarlar boylece kesin hizali.
   =================================================================== */
.maket-ust-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* KULLANICI (2026-10-07): ust kisim "cok buyuk ve kaba". Olculdu -
     grid-auto-rows:1fr IKI SATIRI da en uzun olana (290px) esitliyordu,
     oysa dogal boylar 214 ve 290. Kisa satir bos yere 76px yukseliyordu
     ve yanindaki kartlar (Sistem Sagligi, Proxy) yari yariya bos
     kaliyordu. Satir ici esitligi `> * > .card { height:100% }` zaten
     sagliyor; satirlar ARASI esitlik gereksizdi. */
  grid-auto-rows: auto;
  gap: 1rem;
  /* KULLANICI (2026-10-02): "Guncel Kurlar firsat ilanlarinin uzerine
     binmis". Kok neden buydu - izgara 1.5rem alt bosluk biraktigi icin
     sol taraf erken bitiyor, h-100 olan Kurlar karti satirin dibine
     kadar iniyordu. Bosluk artik SATIRA ait. */
  margin-bottom: 0;
}
.maket-ust-izgara__genis { grid-column: span 2; }
.maket-ust-izgara > * { min-width: 0; min-height: 0; }
.maket-ust-izgara > * > .card { height: 100%; margin-bottom: 0; }

@media (max-width: 991px) {
  .maket-ust-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 575px) {
  .maket-ust-izgara { grid-template-columns: minmax(0, 1fr); }
  .maket-ust-izgara__genis { grid-column: span 1; }
}

/* --- Hero: "EYLÜL KAPANDI" buyutuldu (kullanici: "kucuk kalmis") --- */
.maket-ust-izgara .maket-kar-karti .card-body { padding: 1.15rem 1.3rem; }
.maket-ust-izgara .maket-kar-karti__ic { min-height: 0; gap: .5rem; height: 100%; }
.maket-ust-izgara .maket-kar-karti__metin {
  flex: 1 1 58%; min-width: 142px;
  display: flex; flex-direction: column; justify-content: center;
}
.maket-ust-izgara .maket-kar-karti__ust {
  font-size: .82rem; letter-spacing: .08em; margin-bottom: .35rem;
  color: rgba(255, 255, 255, .78);
}
.maket-ust-izgara .maket-kar-karti__tutar { font-size: 1.78rem; margin: 0 0 .5rem; }
.maket-ust-izgara .maket-kar-karti__cipler { margin-bottom: .7rem; gap: .3rem; }
.maket-ust-izgara .maket-kar-karti__cipler span { padding: .14rem .52rem; font-size: .7rem; }
.maket-ust-izgara .maket-kar-karti__gorsel { flex: 1 1 42%; margin: -1rem -1.1rem -1.1rem 0; }
.maket-ust-izgara .maket-kar-karti__gorsel .maket-lottie { min-height: 0; height: 100%; }

/* --- Dogrulama kodlari --- */
.maket-kod-karti .card-body {
  padding: .75rem 1rem; display: flex; flex-direction: column; height: 100%;
}
/* Kucuk etiket + dugme; kocaman baslik ve ust uste binme giderildi. */
.maket-kod-karti__ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .45rem;
}
.maket-kod-karti__ust > span {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--bs-secondary-color);
}
.maket-kod-karti__ust .btn { padding: .15rem .55rem; font-size: .72rem; }
.maket-kod-karti__liste {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around;
}
.maket-kod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "kim deger dugme" "sure sure sure";
  align-items: center; gap: .12rem .55rem;
  padding: .18rem 0; border-top: 1px solid var(--bs-border-color);
}
.maket-kod:first-child { border-top: 0; }
.maket-kod__kim { grid-area: kim; display: flex; align-items: center; gap: .35rem; min-width: 0; }
.maket-kod__kim .badge { font-size: .62rem; padding: .12rem .4rem; }
.maket-kod__hesap {
  font-size: .76rem; font-weight: 600; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maket-kod__deger {
  grid-area: deger; font-size: .92rem; font-weight: 700; letter-spacing: .08em;
  font-variant-numeric: tabular-nums; color: var(--bs-body-color); white-space: nowrap;
}
.maket-kod .maket-kopyala { grid-area: dugme; padding: .18rem .45rem; }
.maket-kod__sure {
  grid-area: sure; height: 2px; border-radius: 2px;
  background: var(--bs-border-color); overflow: hidden; margin-top: .1rem;
}
.maket-kod__sure span { display: block; height: 100%; background: #5b73e8; border-radius: 2px; }

@media (max-width: 767px) {
  .maket-ust-izgara .maket-kar-karti__gorsel { display: none; }
  .maket-ust-izgara .maket-kar-karti__metin { flex: 1 1 100%; }
}

/* --- Guncel Kurlar: izgara degisince olusan bosluklar toparlandi --- */
/* ===================================================================
   GUNCEL KURLAR - bastan tasarlandi (kullanici 2026-10-02).
   Kurgu: ustte iki kur karti (ayni zamanda cevirici secicisi), altta
   TEK cevirici. Kart soldaki izgaranin boyuna oturur: ceviriciyi
   margin-top:auto alta yapistirir, boylece alt kenarlar hizalanir.
   =================================================================== */
/* KULLANICI (2026-10-07): kart artik kolonun TAMAMINI doldurmuyor -
   dogal boyunda kalir, kalan yuksekligi NOT DEFTERI alir. Eski
   `height:100%` burada kaldigi surece asagidaki `flex:0 0 auto` ise
   yaramiyordu (flex, height'i ezmez). */
.maket-kur { height: auto; }
.maket-kur__govde { display: flex; flex-direction: column; }
.maket-kur__zaman {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .72rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* --- kur kartlari = secici ---
   KULLANICI ISTEGI (2026-10-02): "arada hala kocaman bir bosluk var...
   kurlari alt alta koysak, ceviriciyi de buyutsek". Kart soldaki
   izgara kadar uzadigi icin icerik kisa kalinca ortada bosluk
   olusuyordu. Cozum: kutular ALT ALTA ve `flex:1` + `grid-auto-rows:1fr`
   ile artan yuksekligi ESIT paylasiyorlar - kart ne kadar uzarsa
   uzasin olu bosluk kalmiyor. */
.maket-kur__secim {
  /* KULLANICI (2026-10-07): "Guncel Kurlar formunu yari yariya kisaltalim".
     2026-10-02'de kutular ALT ALTA konmustu, gerekcesi "kart soldaki
     izgara kadar uzadigi icin icerik kisa kalinca ortada bosluk oluyor"
     idi. O bosluk artik NOT DEFTERI ile doluyor, yani gerekce ortadan
     kalkti - iki kutu yan yana gelince kart bir satir kisaliyor. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto; gap: .5rem;
  flex: 0 0 auto; min-height: 0; margin-bottom: .7rem;
}
.maket-kur-kutu {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: .5rem;
  padding: .55rem .6rem; text-align: left; cursor: pointer;
  border: 1px solid var(--bs-border-color); border-radius: 11px;
  background: var(--bs-body-bg); color: inherit;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.maket-kur-kutu:hover { border-color: var(--bs-primary); }
.maket-kur-kutu.etkin {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .35);
}
.maket-kur-kutu__sol { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.maket-kur-kutu__cift {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
}
.maket-kur-kutu__deger {
  /* Yan yana iki kutuya sigmasi icin kuculdu (eski: 1.75rem). */
  font-size: 1.2rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.maket-kur-kutu__deger small {
  font-size: .5em; font-weight: 600; color: var(--bs-secondary-color);
}
.maket-kur-kutu__fark {
  display: inline-flex; align-items: center; gap: .15rem;
  padding: .15rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.maket-kur-kutu__fark--yukari { color: var(--bs-success); background: rgba(var(--bs-success-rgb), .12); }
.maket-kur-kutu__fark--asagi  { color: var(--bs-danger);  background: rgba(var(--bs-danger-rgb), .12); }

/* --- tek cevirici --- */
.maket-kur__cevirici {
  flex: 0 0 auto; padding-top: .7rem;
  border-top: 1px solid var(--bs-border-color);
}
.maket-kur__cevirici-baslik {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
}
.maket-kur__oran {
  text-transform: none; letter-spacing: 0; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.maket-kur__oran b { font-weight: 700; color: var(--bs-body-color); }
.maket-kur__alanlar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: .5rem;
}
.maket-kur__ok { color: var(--bs-secondary-color); opacity: .55; font-size: 1.1rem; }
.maket-kur-alan {
  display: flex; align-items: center; gap: .4rem; min-width: 0;
  padding: .5rem .7rem; margin: 0;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  background: var(--bs-body-bg);
}
.maket-kur-alan:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .18);
}
.maket-kur-alan__birim {
  font-weight: 700; font-size: 1.05rem; color: var(--bs-secondary-color); flex: 0 0 auto;
}
.maket-kur-alan input {
  min-width: 0; width: 100%; border: 0; background: transparent;
  padding: 0; font-size: 1.1rem; font-weight: 700; color: inherit;
  font-variant-numeric: tabular-nums;
}
.maket-kur-alan input:focus { outline: none; }
/* Sayi okunun yer kaplamamasi icin - alan zaten dar. */
.maket-kur-alan input::-webkit-outer-spin-button,
.maket-kur-alan input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.maket-kur-alan input[type=number] { -moz-appearance: textfield; }

/* ===================================================================
   GELEN KUTUSU - ust adres seridi (kullanici 2026-10-02: tek kutu,
   6 adres; Kutular formu kalkti, yerine kopyalanabilir adresler).
   =================================================================== */
.maket-posta-serit {
  background-image:
    radial-gradient(90% 120% at 92% 20%, rgba(224, 208, 253, .34) 0%, transparent 58%),
    linear-gradient(118deg, #232a63 0%, #40379f 48%, #6a5ce2 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-posta-serit__govde {
  display: flex; align-items: center; gap: 1.25rem;
}
.maket-posta-serit__sol { min-width: 0; flex: 1 1 auto; }
.maket-posta-serit__etiket {
  display: inline-block; margin-bottom: .35rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-posta-serit__baslik {
  margin: 0 0 .15rem; color: #fff; font-size: 1.22rem; font-weight: 700;
  text-wrap: balance;
}
.maket-posta-serit__alt {
  margin: 0 0 .7rem; font-size: .82rem; color: rgba(255, 255, 255, .72);
}
.maket-posta-adresler {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
}
.maket-posta-adres {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: .82rem; font-weight: 600;
  transition: background-color .15s, border-color .15s, transform .12s;
}
.maket-posta-adres:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .5);
}
.maket-posta-adres:active { transform: translateY(1px); }
.maket-posta-adres i { opacity: .7; font-size: .85em; }
/* Kopyalandi geribildirimi (ortak JS btn-soft-success ekler). */
.maket-posta-adres.btn-soft-success {
  background: rgba(255, 255, 255, .92); border-color: #fff; color: #1d7a4c;
}
.maket-posta-adres__alan {
  font-size: .8rem; color: rgba(255, 255, 255, .62);
  font-weight: 600; margin-left: .15rem;
}
.maket-posta-serit__gorsel { flex: 0 0 170px; }
.maket-posta-serit__gorsel .maket-lottie { width: 170px; height: 170px; margin: -.75rem 0; }
@media (max-width: 575.98px) {
  .maket-posta-serit__gorsel { display: none; }
}

/* ===================================================================
   MANUEL ILAN YUKLEME - ust serit
   KULLANICI ISTEGI (2026-10-02): "sadece hero formunu bastan
   tasarlayalim, sagdan ve soldan genisligi ilan yukleme formlariyla
   ayni yerde bitmeli - sayfaya cok yayilmis, dagiklik hissi veriyor."

   Genislik sablondan geliyor (col-12 col-lg-10), boylece asagidaki iki
   formun (col-lg-5 + col-lg-5) kenarlarina tam oturur.

   Palet, kullanicinin yukledigi illustrasyondan (klasor + ampul)
   turetildi: erik #45102f -> gul #8d2a52 -> kiremit #c0564e, uzerine
   sag ustte kehribar isik lekesi - leke tam ampulun arkasina denk
   gelir, boylece ampul seridi aydinlatiyormus gibi durur. Gelen
   Kutusu seridiyle ayni iskelet, kendi rengi.
   =================================================================== */
.maket-yukleme-serit {
  background-image:
    radial-gradient(74% 112% at 85% 16%, rgba(254, 201, 98, .38) 0%, transparent 60%),
    linear-gradient(116deg, #45102f 0%, #8d2a52 54%, #c0564e 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-yukleme-serit__govde {
  display: flex; align-items: center; gap: 1.25rem;
}
.maket-yukleme-serit__sol { min-width: 0; flex: 1 1 auto; }
.maket-yukleme-serit__etiket {
  display: inline-block; margin-bottom: .35rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-yukleme-serit__baslik {
  margin: 0 0 .25rem; color: #fff; font-size: 1.22rem; font-weight: 700;
  text-wrap: balance;
}
.maket-yukleme-serit__alt {
  margin: 0 0 .85rem; max-width: 42rem;
  font-size: .84rem; color: rgba(255, 255, 255, .76);
}
.maket-yukleme-serit__alt b { color: #ffdf9a; font-weight: 700; }

/* Iki adimli ray. Numaralandirma SUS DEGIL: bu is gercekten iki adim,
   sira bilgisi kullaniciya nerede oldugunu soyluyor. */
.maket-yukleme-adimlar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin: 0; padding: 0; list-style: none;
}
.maket-yukleme-adim {
  display: inline-flex; align-items: center; gap: .55rem;
}
.maket-yukleme-adim__ok { opacity: .5; font-size: .95rem; }
.maket-yukleme-adim__kutu {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem .3rem .4rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .26);
  font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .78);
}
.maket-yukleme-adim__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  background: rgba(255, 255, 255, .16);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* Bulundugumuz adim dolu, sonraki adim soluk - nerede oldugu bir
   bakista okunur. */
.maket-yukleme-adim--aktif .maket-yukleme-adim__kutu {
  background: #fff; border-color: #fff; color: #5b1538;
}
.maket-yukleme-adim--aktif .maket-yukleme-adim__no {
  background: #c0564e; color: #fff;
}

.maket-yukleme-serit__gorsel { flex: 0 0 190px; }
.maket-yukleme-serit__gorsel .maket-lottie {
  width: 190px; height: 190px; margin: -1rem -.4rem -1.25rem 0;
}
@media (max-width: 767.98px) {
  .maket-yukleme-serit__baslik { font-size: 1.12rem; }
  .maket-yukleme-serit__gorsel { display: none; }
}

/* ===================================================================
   MANUEL ILAN YUKLEME - goruntu alma formu
   Kullanici istegi (2026-10-05, madde 4): yapistirilan GM ilaninin
   Details ve Skins bolumlerinin ekran goruntusu alinip indirilecek.

   Iki sutun: solda ISTEK (url + bolum secimi), sagda SONUC (alinan
   kareler). Istek ve sonucu ayni ekranda tutmak, "aldi mi almadi mi"
   sorusunu ortadan kaldiriyor. Dar ekranda alt alta duser.
   =================================================================== */
.maket-ss__govde {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: 1.5rem; align-items: start;
}
@media (max-width: 991.98px) {
  .maket-ss__govde { grid-template-columns: minmax(0, 1fr); }
}
.maket-ss__istek { min-width: 0; }

/* Bolum secimi: kutucuk degil, basilabilir cip - dokunmatikte de rahat */
.maket-ss__secimler { display: flex; flex-wrap: wrap; gap: .5rem; }
.maket-ss__secim { position: relative; cursor: pointer; }
.maket-ss__secim input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.maket-ss__secim span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  font-size: .84rem; font-weight: 600; color: var(--bs-secondary-color);
  transition: background-color .15s, border-color .15s, color .15s;
}
.maket-ss__secim input:checked + span {
  background: var(--bs-primary-bg-subtle, rgba(91, 115, 232, .14));
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.maket-ss__secim input:focus-visible + span {
  outline: 2px solid var(--bs-primary); outline-offset: 2px;
}

/* Sonuc sutunu */
.maket-ss__sonuc {
  border: 1px solid var(--bs-border-color); border-radius: 12px;
  padding: .9rem; background: var(--bs-tertiary-bg);
}
.maket-ss__sonuc-baslik {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.maket-ss__kare {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem; margin-bottom: .5rem;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  background: var(--bs-body-bg);
}
/* Onizleme yer tutucusu: gercek bir ekran goruntusunun oranini taklit
   eden cizgili bir kutu - makette dosya "var" hissi verir. */
.maket-ss__onizleme {
  flex: 0 0 52px; height: 40px; border-radius: 6px; position: relative;
  background-image: repeating-linear-gradient(
    135deg, var(--bs-tertiary-bg) 0 6px, var(--bs-secondary-bg) 6px 12px);
  border: 1px solid var(--bs-border-color);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.maket-ss__onizleme-etiket {
  font-size: .56rem; font-weight: 700; letter-spacing: .03em;
  padding: .05rem .25rem; width: 100%; text-align: center;
  background: rgba(0, 0, 0, .55); color: #fff;
}
.maket-ss__bilgi { min-width: 0; flex: 1 1 auto; }
.maket-ss__ad {
  margin: 0; font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.maket-ss__ayrinti {
  margin: 0; font-size: .72rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}
.maket-ss__indir { flex: 0 0 auto; }

/* ===================================================================
   ILAN DUZENLEME - islem butonlari (madde 6) ve sayi sutunlari (madde 7)
   Kullanici (2026-10-05): "butonlar cok kucuk" + "hangisinin hangi ise
   yaradigi net olmali, mouse uzerine gelince ne ise yaradigi yazabilir".

   Bootstrap'in kendi title tooltip'i KULLANILMADI: ~1 sn gecikmeyle
   aciliyor, isletim sisteminin gri kutusu geliyor ve islemin rengini
   tasimiyor - "hangisi silme?" sorusu tam da o gecikmede yasaniyordu.
   Kendi etiketimiz gecikmesiz acilir ve butonun rengini tasir.
   =================================================================== */
.maket-islemler { display: inline-flex; gap: .35rem; }

.maket-islem {
  --islem-renk: var(--bs-secondary);
  --islem-zemin: var(--bs-secondary-bg);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid transparent;
  background: var(--islem-zemin); color: var(--islem-renk);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease,
              background-color .15s ease, border-color .15s ease;
}
.maket-islem:hover {
  transform: translateY(-2px);
  border-color: var(--islem-renk);
  box-shadow: 0 6px 16px -6px var(--islem-renk);
}
.maket-islem:active { transform: translateY(0); }
.maket-islem:focus-visible {
  outline: 2px solid var(--islem-renk); outline-offset: 2px;
}

.maket-islem--duzenle { --islem-renk: #4a6cf7; --islem-zemin: rgba(74, 108, 247, .12); }
.maket-islem--delist  { --islem-renk: #d98324; --islem-zemin: rgba(217, 131, 36, .14); }
.maket-islem--sil     { --islem-renk: #d6455d; --islem-zemin: rgba(214, 69, 93, .13); }

/* Ipucu: butonun USTUNDE, kendi renginde, gecikmesiz. */
.maket-islem::after {
  content: attr(data-ipucu);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  padding: .26rem .55rem; border-radius: 7px;
  background: var(--islem-renk); color: #fff;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
  z-index: 5;
}
/* Ucgen cenesi - etiketin hangi butona ait oldugu kesin olsun */
.maket-islem::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 5px solid transparent; border-top-color: var(--islem-renk);
  opacity: 0; pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
  z-index: 5;
}
.maket-islem:hover::after, .maket-islem:focus-visible::after,
.maket-islem:hover::before, .maket-islem:focus-visible::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .maket-islem, .maket-islem::after, .maket-islem::before { transition: none; }
  .maket-islem:hover { transform: none; }
}

/* Sampiyon ve Kostum ayri sutunlar (madde 7) - rakamlar alt alta
   hizalansin diye tabular rakam. */
.maket-sayi-sutun {
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color);
}

/* ===================================================================
   ILAN DUZENLEME - hero (madde 8)
   Kullanici (2026-10-05): "Hero formu tekrar tasarlansin."
   Eskisi var olmayan bir gorsele (ill-2.png) bakiyor ve tek satir metin
   tasiyordu. Burasi bir STOK sayfasi - hero'nun isi toplam kaydi ve
   DAGILIMINI bir bakista vermek, o yuzden illustrasyon yerine verinin
   kendisi kondu.

   Palet digerlerinden ayri: gece mavisi -> petrol, uzerine turkuaz
   vurgu. (Ana sayfa kirmizi/finans, Gelen Kutusu mor, Manuel Yukleme
   erik-gul; her sayfa kendi rengiyle taniniyor.)
   =================================================================== */
.maket-stok {
  background-image:
    radial-gradient(85% 120% at 88% 10%, rgba(45, 212, 191, .26) 0%, transparent 58%),
    linear-gradient(122deg, #10203a 0%, #16324f 52%, #1d4f5e 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-stok__etiket {
  display: inline-block; margin-bottom: .5rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-stok__ust {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin-bottom: 1rem;
}
.maket-stok__sayi {
  margin: 0; color: #fff; font-size: 2.3rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.maket-stok__dugme { margin-left: auto; }

.maket-stok__cubuk {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .14); margin-bottom: .8rem;
}
.maket-stok__dilim { display: block; height: 100%; }
.maket-stok__dilim--yayin  { background: #2dd4bf; }
.maket-stok__dilim--pahali { background: #f0a132; }

.maket-stok__lejant {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .9rem; margin: 0; padding: 0; list-style: none;
  font-size: .82rem; color: rgba(255, 255, 255, .78);
}
.maket-stok__lejant b {
  color: #fff; font-weight: 700; margin-left: .25rem;
  font-variant-numeric: tabular-nums;
}
/* Cubukta yer almayan iki kalem, ince bir cizgiyle ayrilir - "bunlar
   toplamin disinda" bilgisi gorsel olarak da dursun. */
.maket-stok__lejant-ayri {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: .35rem; margin-top: .15rem;
}
.maket-stok__lejant-ayri + li {
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: .35rem; margin-top: .15rem;
}
.maket-stok__nokta {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: .4rem; vertical-align: middle;
}
.maket-stok__nokta--yayin      { background: #2dd4bf; }
.maket-stok__nokta--pahali     { background: #f0a132; }
.maket-stok__nokta--kaldirilan { background: #e0607a; }
.maket-stok__nokta--manuel     { background: #8aa9ff; }

/* ===================================================================
   YAYINLAMA KURALLARI - hero (madde 12), teklif esikler (9), ortak
   parametre rozeti (11)
   Kullanici (2026-10-05): "Hero formu bastan tasarlansin. Otomatik
   yayinlama butonu ve yazisi daha buyuk olmali. Gerekirse illustrasyon
   kullanma."

   Illustrasyon yok - buradaki is bir ANAHTAR, susu degil. Palet zumrut:
   bu sayfa bir KAPI (gecen / elenen), yesil-kirmizi okumasi dogal.
   =================================================================== */
.maket-kural-serit {
  background-image:
    radial-gradient(80% 120% at 90% 12%, rgba(52, 211, 153, .26) 0%, transparent 58%),
    linear-gradient(118deg, #0d2b22 0%, #14503c 50%, #1d6b4a 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-kural-serit__govde {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem;
}
.maket-kural-serit__sol { min-width: 0; flex: 1 1 22rem; }
.maket-kural-serit__etiket {
  display: inline-block; margin-bottom: .35rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-kural-serit__baslik {
  margin: 0 0 .25rem; color: #fff; font-size: 1.45rem; font-weight: 700;
}
.maket-kural-serit__alt {
  margin: 0 0 .7rem; font-size: .85rem; color: rgba(255, 255, 255, .78);
}
.maket-kural-serit__alt b { color: #fff; }
.maket-kural-serit__sayac { display: flex; flex-wrap: wrap; gap: .5rem; }
.maket-kural-gecen, .maket-kural-elenen {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600;
}
.maket-kural-gecen  { background: rgba(52, 211, 153, .22); color: #a7f3d0; }
.maket-kural-elenen { background: rgba(248, 113, 113, .2); color: #fecaca; }
.maket-kural-gecen b, .maket-kural-elenen b { color: #fff; }

/* Otomatik yayinlama: BUYUK ve magaza basina ayri (madde 12) */
.maket-oto { display: flex; flex-wrap: wrap; gap: .75rem; margin-left: auto; }
.maket-oto__kutu {
  min-width: 13.5rem; padding: .85rem 1rem; border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: background-color .18s ease, border-color .18s ease;
}
.maket-oto__kutu--acik {
  background: rgba(52, 211, 153, .18);
  border-color: rgba(52, 211, 153, .55);
}
.maket-oto__magaza {
  display: block; margin-bottom: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.maket-oto__anahtar {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer; margin: 0;
}
/* Anahtarin kendisi buyutuldu - kullanici "daha buyuk olmali" dedi */
.maket-oto__anahtar .form-check-input {
  width: 3.4rem; height: 1.75rem; margin: 0; flex: 0 0 auto;
  background-color: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .35);
}
.maket-oto__anahtar .form-check-input:checked {
  background-color: #34d399; border-color: #34d399;
}
.maket-oto__anahtar .form-check-input:focus {
  box-shadow: 0 0 0 .25rem rgba(52, 211, 153, .3);
}
.maket-oto__yazi {
  font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .9);
}
.maket-oto__durum {
  margin-left: auto; font-size: .95rem; font-weight: 800;
  letter-spacing: .04em;
}
.maket-oto__kutu--acik .maket-oto__durum { color: #6ee7b7; }
@media (max-width: 575.98px) {
  .maket-oto { width: 100%; }
  .maket-oto__kutu { flex: 1 1 100%; }
}

/* Teklif esikler (madde 9): henuz gercek panelde YOK - karistirilmasin */
.maket-kural-teklif > td:first-child { position: relative; }
.maket-rozet-teklif, .maket-rozet-ortak {
  display: inline-block; margin-left: .4rem; vertical-align: middle;
  padding: .05rem .4rem; border-radius: 5px;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.maket-rozet-teklif {
  background: rgba(139, 92, 246, .16); color: #7c5cd6;
  border: 1px dashed rgba(139, 92, 246, .5);
}
.maket-rozet-ortak {
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color);
}
/* Env anahtari: hangi degiskeni duzenledigin belli olsun (madde 11) */
.maket-anahtar {
  display: inline-block; margin-top: .15rem;
  font-size: .66rem; color: var(--bs-secondary-color);
  background: var(--bs-tertiary-bg); padding: .05rem .3rem; border-radius: 4px;
}

/* ===================================================================
   TARAMA (madde 13) · FINANS hero (14) · grafik kapagi (15)
   =================================================================== */

/* --- Tarama: surecin su anki hali, illustrasyon yerine nabiz --- */
.maket-tarama-serit {
  background-image:
    radial-gradient(78% 120% at 88% 14%, rgba(56, 189, 248, .24) 0%, transparent 58%),
    linear-gradient(120deg, #0e1b33 0%, #16304f 52%, #1b4a6b 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-tarama__govde {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem;
}
.maket-tarama__sol { display: flex; align-items: flex-start; gap: .75rem; flex: 1 1 20rem; min-width: 0; }
.maket-tarama__etiket {
  display: inline-block; margin-bottom: .2rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #7dd3fc;
}
.maket-tarama__baslik { margin: 0 0 .2rem; color: #fff; font-size: 1.3rem; font-weight: 700; }
.maket-tarama__alt { margin: 0; font-size: .83rem; color: rgba(255, 255, 255, .74); }
.maket-tarama__alt b { color: #fff; }
/* Nabiz: "calisiyor" bilgisini metin tekrar etmeden tasir */
.maket-tarama__nabiz {
  position: relative; flex: 0 0 10px; width: 10px; height: 10px;
  margin-top: .35rem; border-radius: 50%; background: #38bdf8;
}
.maket-tarama__nabiz::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #38bdf8; animation: maket-nabiz 2s ease-out infinite;
}
@keyframes maket-nabiz {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .maket-tarama__nabiz::after { animation: none; opacity: 0; }
}
.maket-tarama__sayilar { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; }
.maket-tarama__sayi { display: flex; flex-direction: column; gap: .1rem; }
.maket-tarama__sayi span {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62);
}
.maket-tarama__sayi b {
  font-size: 1.25rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.maket-tarama__yeni { color: #7dd3fc !important; }
@media (max-width: 767.98px) {
  .maket-tarama__sayilar { margin-left: 0; gap: 1rem; }
  .maket-tarama__eylem { width: 100%; }
  .maket-tarama__eylem .btn { width: 100%; }
}

/* --- Finans hero: donemin ozeti --- */
.maket-finans-serit {
  background-image:
    radial-gradient(76% 118% at 86% 12%, rgba(250, 204, 21, .22) 0%, transparent 58%),
    linear-gradient(120deg, #0c2722 0%, #11483a 48%, #166d4e 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-finans__govde {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem;
}
.maket-finans__ana { flex: 0 0 auto; min-width: 0; }
.maket-finans__etiket {
  display: inline-block; margin-bottom: .3rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-finans__tutar {
  margin: 0; color: #fff; font-size: 2.4rem; font-weight: 700;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.maket-finans__alt { margin: .25rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .78); }
.maket-finans__alt b { color: #fde68a; }

.maket-finans__sayilar {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  padding-left: 1.5rem; border-left: 1px solid rgba(255, 255, 255, .18);
}
.maket-finans__sayi { display: flex; flex-direction: column; gap: .1rem; }
.maket-finans__sayi-ad {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.maket-finans__sayi b {
  font-size: 1.05rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* Mini cubuklar: duz CSS, grafik kutuphanesi cagirmadan egilim */
.maket-finans__mini { display: flex; flex-direction: column; gap: .3rem; }
.maket-finans__cubuklar {
  display: flex; align-items: flex-end; gap: .22rem; height: 46px;
}
.maket-finans__cubuk {
  width: 9px; border-radius: 3px 3px 0 0;
  background: rgba(255, 255, 255, .3);
}
.maket-finans__cubuk--son { background: #fde68a; }
.maket-finans__mini-not {
  font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.maket-finans__donem { margin-left: auto; }
@media (max-width: 991.98px) {
  .maket-finans__sayilar { padding-left: 0; border-left: 0; }
  .maket-finans__donem { margin-left: 0; width: 100%; }
}

/* --- Grafik kapagi (madde 15): dort grafik tek dugmeyle --- */
.maket-grafik-kapak { overflow: hidden; }
.maket-grafik-dugme {
  display: flex; align-items: center; gap: 1rem; width: 100%;
  padding: .95rem 1.2rem; border: 0; background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.maket-grafik-dugme:hover { background: var(--bs-tertiary-bg); }
.maket-grafik-dugme__sol { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.maket-grafik-dugme__sol > i {
  font-size: 1.3rem; color: var(--bs-primary); flex: 0 0 auto;
}
.maket-grafik-dugme__sol b { display: block; font-size: .95rem; }
.maket-grafik-dugme__sol small {
  display: block; font-size: .76rem; color: var(--bs-secondary-color);
}
.maket-grafik-dugme__ok {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  transition: transform .2s ease;
}
/* Acikken ok yukari doner - kapali/acik durumu bir bakista */
.maket-grafik-dugme:not(.collapsed) .maket-grafik-dugme__ok { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .maket-grafik-dugme__ok { transition: none; }
}

/* ===================================================================
   HESAP ENVANTERI (madde 16, 19, 21)
   =================================================================== */

/* --- Hero: "elimde ne var, ne kadar bagli" (madde 16) --- */
.maket-stok-serit {
  background-image:
    radial-gradient(80% 118% at 88% 14%, rgba(129, 212, 250, .24) 0%, transparent 58%),
    linear-gradient(122deg, #15213b 0%, #1d3a5c 52%, #255a73 100%);
  color: #fff; border: 0; overflow: hidden;
}
.maket-stok-serit__etiket {
  display: inline-block; margin-bottom: .4rem;
  padding: .12rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
}
.maket-stok-serit__ust {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
}
.maket-stok-serit__tutar {
  margin: 0; color: #fff; font-size: 2.2rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.maket-stok-serit__dugme { margin-left: auto; }
.maket-stok-serit__alt {
  margin: .4rem 0 .9rem; font-size: .84rem; color: rgba(255, 255, 255, .76);
}
.maket-stok-serit__alt b { color: #fff; }
.maket-stok-serit__dagilim { display: flex; flex-wrap: wrap; gap: .4rem; }
.maket-stok-serit__pay {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .82);
}
.maket-stok-serit__pay b {
  color: #fff; font-variant-numeric: tabular-nums;
}
.maket-stok-serit__pay--ikosi, .maket-stok-serit__pay--ikisi {
  background: rgba(52, 211, 153, .2); border-color: rgba(52, 211, 153, .45);
}
.maket-stok-serit__pay--g2g {
  background: rgba(96, 165, 250, .2); border-color: rgba(96, 165, 250, .45);
}
.maket-stok-serit__pay--gm {
  background: rgba(125, 211, 252, .18); border-color: rgba(125, 211, 252, .4);
}

/* --- Kimlik bilgileri: tek tikla kopyalanir (madde 19) --- */
.maket-kimlik {
  display: inline-flex; align-items: center; gap: .35rem;
  max-width: 100%; padding: .22rem .5rem;
  border: 1px solid var(--bs-border-color); border-radius: 7px;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  font-size: .8rem; font-weight: 500; cursor: pointer;
  font-family: var(--bs-font-monospace, monospace);
  transition: background-color .14s, border-color .14s;
}
.maket-kimlik:hover {
  background: var(--bs-tertiary-bg); border-color: var(--bs-primary);
}
.maket-kimlik > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.maket-kimlik > i { opacity: .55; font-size: .85em; flex: 0 0 auto; }
.maket-kimlik:hover > i { opacity: 1; }
/* Kopyalandi geribildirimi ortak JS'ten gelir (btn-soft-success) */
.maket-kimlik.btn-soft-success {
  background: rgba(34, 197, 94, .14); border-color: #22c55e; color: #15803d;
}
.maket-kimlik-sifre { display: inline-flex; align-items: center; gap: .25rem; }
/* GERCEK HATA (2026-10-07): .maket-kopya-deger'in HIC kurali yoktu.
   Dar bir sutunda "••••••••" sekiz noktanin her biri ALT SATIRA dusuyor,
   span 8px genisliginde 158px YUKSEKLIGINDE oluyordu. Tek basina Magaza
   Hesaplari tablosunu 772px, karti 864px yapan sey buydu - "guvenlik
   sayfasi simetrik olarak bozuk" sikayetinin kokeni.
   Kopyalanacak bir deger zaten hicbir zaman sarmamali: ya tek satirda
   durur ya da kirpilir. */
.maket-kopya-deger {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; font-variant-numeric: tabular-nums;
}
.maket-goz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--bs-border-color); border-radius: 7px;
  background: var(--bs-body-bg); color: var(--bs-secondary-color);
  cursor: pointer; font-size: .85rem;
}
.maket-goz:hover { border-color: var(--bs-primary); color: var(--bs-primary); }

/* ===================================================================
   GUVENLIK - authenticator kartlari (madde 22), kripto cuzdanlar (23)
   Kullanici (2026-10-05): "authenticator formlari kuculsun, Yakituslar
   yanyana, Safemarktlar yanyana olsun. Dortlunun yanina da Magaza
   hesaplari formu gelsin."
   =================================================================== */
.maket-kod-satir { --bs-gutter-y: .75rem; }
.maket-kod-satir + .maket-kod-satir { margin-top: 0; }
.maket-kod { margin-bottom: .75rem; }
.maket-kod .card-body { padding: .8rem .95rem; }
.maket-kod__ust {
  display: flex; align-items: baseline; gap: .4rem; margin-bottom: .35rem;
}
.maket-kod__magaza {
  font-size: .82rem; font-weight: 700;
}
.maket-kod__platform {
  margin-left: auto;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--bs-secondary-color);
}
.maket-kod__orta {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
}
/* Kod h2 idi - kart kuculunce en cok yer kaplayan oydu. Okunakli kalsin
   diye harf araligi korundu, punto dusuruldu. */
.maket-kod__deger {
  font-size: 1.35rem; font-weight: 700; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.maket-kod__kopya {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: var(--bs-secondary-color);
  cursor: pointer; font-size: .85rem;
}
.maket-kod__kopya:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.maket-kod__kopya.btn-soft-success {
  background: rgba(34, 197, 94, .14); border-color: #22c55e; color: #15803d;
}
.maket-kod__alt { display: flex; align-items: center; gap: .5rem; }
.maket-kod__cubuk { flex: 1 1 auto; height: 3px; }
.maket-kod__alt small {
  font-size: .7rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- Kripto cuzdanlar (madde 23) --- */
.maket-cuzdan {
  padding: .7rem .85rem; margin-bottom: .6rem;
  border: 1px solid var(--bs-border-color); border-radius: 10px;
  background: var(--bs-body-bg);
}
/* En ucuz ag isaretli: ag secimi dogrudan para demek */
.maket-cuzdan--onerilen {
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .05);
}
.maket-cuzdan__ust {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin-bottom: .45rem;
}
.maket-cuzdan__ad { font-size: .86rem; font-weight: 700; }
.maket-cuzdan__ag {
  font-size: .74rem; color: var(--bs-secondary-color); font-weight: 600;
}
.maket-cuzdan__rozet {
  padding: .05rem .4rem; border-radius: 5px;
  background: rgba(34, 197, 94, .16); color: #15803d;
  font-size: .64rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.maket-cuzdan__kesinti {
  margin-left: auto; font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.maket-cuzdan__adres {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .35rem .55rem; border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg); cursor: pointer;
  transition: border-color .14s, background-color .14s;
}
.maket-cuzdan__adres:hover {
  border-color: var(--bs-primary); background: var(--bs-body-bg);
}
.maket-cuzdan__adres code {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .76rem; color: var(--bs-body-color);
}
.maket-cuzdan__adres i { margin-left: auto; opacity: .55; flex: 0 0 auto; }
.maket-cuzdan__adres:hover i { opacity: 1; }
.maket-cuzdan__adres.btn-soft-success {
  background: rgba(34, 197, 94, .14); border-color: #22c55e;
}

/* ===================================================================
   SERVISLER (madde 24)
   Kullanici (2026-10-05): "Hero formunu yeniden tasarla ama COK RENKLI
   bir sey olmasina gerek yok, burasi daha ciddi bir sayfa."

   Gradyan ve illustrasyon YOK. Notr koyu bir zemin, buyuk bir sayi ve
   tek bir eylem - burasi bir ariza aninda bakilan sayfa, diger
   sayfalarin renkli seritleri burada yanlis ton olurdu.
   =================================================================== */
.maket-servis-serit {
  background: #1c2232; color: #fff; border: 0;
  border-left: 3px solid #4ade80;
}
:root:not([data-theme="light"]) .maket-servis-serit { background: #161b28; }
.maket-servis-serit__etiket {
  display: inline-block; margin-bottom: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.maket-servis-serit__ust {
  display: flex; align-items: baseline; gap: .5rem;
}
.maket-servis-serit__sayi {
  margin: 0; color: #fff; font-size: 2.4rem; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.maket-servis-serit__sayi small {
  font-size: 1.1rem; font-weight: 600; color: rgba(255, 255, 255, .45);
}
.maket-servis-serit__ok {
  font-size: .9rem; font-weight: 600; color: #4ade80;
}
.maket-servis-serit__alt {
  margin: .5rem 0 1rem; font-size: .83rem; color: rgba(255, 255, 255, .62);
}
.maket-servis-serit__alt b { color: rgba(255, 255, 255, .9); }
.maket-servis-serit__eylem { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Servis listesi: ANA GRUPLAMA OYUNA GORE (kullanici 2026-10-05) ---
   Onceki duzen davranisa goreydi (surekli / zamanlayicili / altyapi) ve
   oyun yalnizca satir icinde kucuk bir rozetti; 30 satirlik listede LoL
   ile Valorant birbirine karisiyordu. Simdi oyun BASLIK, davranis rozet.
   Her grup kendi renginden bir sol serit tasiyor - goz tabloyu renkten
   tariyor, metni okumadan nerede oldugunu biliyor. */
.maket-servis-grup > td {
  background: var(--bs-tertiary-bg);
  padding-top: .5rem !important; padding-bottom: .5rem !important;
  border-left: 3px solid var(--grup-renk, var(--bs-border-color));
}
.maket-servis-grup--lol { --grup-renk: #c89b3c; }
.maket-servis-grup--valorant { --grup-renk: #ff4655; }
.maket-servis-grup--ortak { --grup-renk: #7c8db5; }
.maket-servis-grup__sol {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
}
/* Logolar kendi renklerinde; esit YUKSEKLIK veriliyor, esit genislik
   degil - LoL yatay, Valorant daha genis bir kilit biciminde. */
.maket-servis-grup__logo {
  height: 17px; width: auto; max-width: 92px; object-fit: contain;
}
.maket-servis-grup__nokta {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grup-renk, var(--bs-secondary-color));
}
.maket-servis-grup__ad {
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
}
.maket-servis-grup__sayi {
  display: inline-block; padding: .04rem .42rem;
  border-radius: 999px; background: var(--bs-secondary-bg);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.maket-servis-grup__sayi--zamanli {
  background: rgba(124, 141, 181, .16); color: #6a7fa8;
}
.maket-servis-grup__sayi--bekleyen {
  background: rgba(255, 70, 85, .13); color: #e0485f;
}
.maket-servis-grup__not {
  margin-left: .15rem; font-size: .72rem; color: var(--bs-secondary-color);
}

/* Davranis rozeti: oyun basliga cikinca bu satira indi. Silinemez cunku
   zamanlayicili bir isin "beklemede" olmasi NORMAL, surekli bir servisin
   durmasi ARIZA; rozet olmadan bes timer birimi "kapali servis" diye
   okunur. Rengi degil DOKUSU farkli - renk zaten oyuna ayrilmis. */
.maket-servis-davranis {
  display: inline-block; margin-left: .35rem; padding: .02rem .36rem;
  border: 1px solid var(--bs-border-color); border-radius: 5px;
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  color: var(--bs-secondary-color); vertical-align: middle;
  cursor: help;
}
.maket-servis-davranis--surekli {
  border-color: rgba(34, 160, 107, .4); color: #1f8c5d;
}
.maket-servis-davranis--zamanli { border-style: dashed; }
.maket-servis-davranis--altyapi {
  background: var(--bs-tertiary-bg); border-style: dotted;
}

/* Kurulmamis Valorant servisleri: listede DURUYOR (yol haritasi) ama
   calisan bir birim gibi okunmamali - soluk ve islemsiz. */
.maket-servis-satir--pasif > td { opacity: .58; }
.maket-servis-yok {
  font-size: .68rem; font-style: italic; color: var(--bs-secondary-color);
}
/* Kurulmamis satirin tek gercek bilgisi: LoL'deki ikizi. */
.maket-servis-ikiz {
  font-size: .68rem; color: var(--bs-secondary-color);
}
.maket-servis-ikiz code { font-size: .68rem; }
/* Servis islem butonlari - Ilan Duzenleme'dekiyle ayni dil */
.maket-islem--baslat { --islem-renk: #22a06b; --islem-zemin: rgba(34, 160, 107, .13); }
.maket-islem--durdur { --islem-renk: #d98324; --islem-zemin: rgba(217, 131, 36, .14); }
.maket-islem--yenile { --islem-renk: #4a6cf7; --islem-zemin: rgba(74, 108, 247, .12); }

/* --- Ayarlar: baska sayfada yonetilen ayarlara kopru (madde 25) --- */
.maket-kopru-kart { border-style: dashed; }
.maket-kopru-baslik {
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.maket-kopruler { display: flex; flex-direction: column; gap: .5rem; }
.maket-kopru {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg); color: inherit; text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.maket-kopru:hover {
  border-color: var(--bs-primary); background: var(--bs-tertiary-bg);
}
.maket-kopru > i:first-child { font-size: 1.2rem; color: var(--bs-primary); flex: 0 0 auto; }
.maket-kopru__metin { min-width: 0; flex: 1 1 auto; }
.maket-kopru__metin b { display: block; font-size: .88rem; }
.maket-kopru__metin small {
  display: block; font-size: .74rem; color: var(--bs-secondary-color);
}
.maket-kopru__sayi {
  flex: 0 0 auto; font-size: .72rem; font-weight: 600;
  color: var(--bs-secondary-color); white-space: nowrap;
}
.maket-kopru__ok { flex: 0 0 auto; opacity: .5; }
.maket-kopru:hover .maket-kopru__ok { opacity: 1; }

/* --- Sistem Durumu: eklenen uc kart (madde 26) --- */
.maket-sistem-satir {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.maket-sistem-satir:last-child { border-bottom: 0; }
.maket-sistem-satir__ad { font-size: .86rem; font-weight: 600; }
.maket-sistem-satir__not {
  width: 100%; font-size: .74rem; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================
   HERO HAREKETI
   Kullanici (2026-10-05): "bazi hero tasarimlari biraz daha hareketli
   olabilirmis."

   Gradyanin KENDISI animasyonlanmadi - background-position oynatmak
   metnin arkasindaki kontrasti degistirip okunakliligi dalgalandiriyor.
   Bunun yerine serit basina AYRI bir isik katmani (::after) usul usul
   nefes alir: kontrast sabit kalir, kart canlanir.

   Servisler seridi BILEREK haric - kullanici "cok renkli bir sey
   olmasina gerek yok, burasi daha ciddi bir sayfa" dedi; ariza aninda
   bakilan bir ekranda kipirdayan isik dikkat dagitir.

   prefers-reduced-motion'da tamamen durur.
   =================================================================== */
.maket-yukleme-serit, .maket-posta-serit, .maket-kural-serit,
.maket-finans-serit, .maket-tarama-serit, .maket-stok,
.maket-stok-serit {
  position: relative;
}
.maket-yukleme-serit::after, .maket-posta-serit::after, .maket-kural-serit::after,
.maket-finans-serit::after, .maket-tarama-serit::after, .maket-stok::after,
.maket-stok-serit::after {
  content: ""; position: absolute;
  top: -40%; right: -12%; width: 55%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .13) 0%, transparent 68%);
  animation: maket-isik-nefes 11s ease-in-out infinite;
}
/* Ikinci, daha yavas ve ters yonde bir leke - tek leke mekanik
   duruyordu, ikisi birlikte duzensiz bir canlilik veriyor. */
.maket-yukleme-serit::before, .maket-kural-serit::before,
.maket-finans-serit::before, .maket-stok::before {
  content: ""; position: absolute;
  bottom: -45%; left: 8%; width: 42%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 0%, transparent 70%);
  animation: maket-isik-nefes 17s ease-in-out infinite reverse;
}
/* Icerik her zaman isigin USTUNDE kalmali */
.maket-yukleme-serit .card-body, .maket-posta-serit .card-body,
.maket-kural-serit .card-body, .maket-finans-serit .card-body,
.maket-tarama-serit .card-body, .maket-stok .card-body,
.maket-stok-serit .card-body { position: relative; z-index: 1; }

@keyframes maket-isik-nefes {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .95; }
  50%      { transform: translate(-7%, 9%) scale(1.15); opacity: .55; }
}

/* Finans hero'sundaki mini cubuklar sirayla yukselir - sayfa acilirken
   "veri geldi" hissi; bir kez oynar, dongu yok. */
.maket-finans__cubuk {
  transform-origin: bottom;
  animation: maket-cubuk-yuksel .5s cubic-bezier(.22, .8, .3, 1) both;
}
.maket-finans__cubuk:nth-child(1) { animation-delay: .05s; }
.maket-finans__cubuk:nth-child(2) { animation-delay: .11s; }
.maket-finans__cubuk:nth-child(3) { animation-delay: .17s; }
.maket-finans__cubuk:nth-child(4) { animation-delay: .23s; }
.maket-finans__cubuk:nth-child(5) { animation-delay: .29s; }
.maket-finans__cubuk:nth-child(6) { animation-delay: .35s; }
@keyframes maket-cubuk-yuksel {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Stok dagilim cubugu (Ilan Duzenleme) soldan dolar */
.maket-stok__dilim {
  animation: maket-dilim-dol .8s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: .25s;
}
@keyframes maket-dilim-dol { from { width: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  .maket-yukleme-serit::after, .maket-posta-serit::after, .maket-kural-serit::after,
  .maket-finans-serit::after, .maket-tarama-serit::after, .maket-stok::after,
  .maket-stok-serit::after,
  .maket-yukleme-serit::before, .maket-kural-serit::before,
  .maket-finans-serit::before, .maket-stok::before,
  .maket-finans__cubuk, .maket-stok__dilim { animation: none !important; }
}

/* ===================================================================
   OYUN AYRIMI (madde 27-28)
   Kullanici (2026-10-05): iki oyun (LoL / Valorant) icin sistem TAMAMEN
   AYRI; menu gruplari acilip kapanabilir olmali ki kenar cubugu
   karismasin.
   =================================================================== */
.maket-oyun-baslik { padding: 0 !important; }
.maket-oyun-dugme {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .9rem; border: 0; background: transparent;
  color: inherit; cursor: pointer; text-align: left;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; opacity: .75;
}
.maket-oyun-dugme:hover { opacity: 1; }
.maket-oyun-dugme > i:first-child { font-size: 1rem; }
.maket-oyun-ok {
  margin-left: auto; font-size: .9rem; transition: transform .2s ease;
}
.maket-oyun-dugme.collapsed .maket-oyun-ok { transform: rotate(-90deg); }


/* Oyun seridi: hangi oyunun verisine bakildigini soyler ve gecis verir */
.maket-oyun-serit {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
  padding: .55rem .9rem; margin-bottom: 1rem;
  border-radius: 10px; border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  border-left: 3px solid var(--oyun-renk, #4a6cf7);
}
.maket-oyun-serit--lol      { --oyun-renk: #4a6cf7; }
.maket-oyun-serit--valorant { --oyun-renk: #e0485f; }
.maket-oyun-serit__ad {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .86rem; font-weight: 700; color: var(--oyun-renk);
}
.maket-oyun-serit__not {
  font-size: .78rem; color: var(--bs-secondary-color);
}
.maket-oyun-serit__gecis { display: inline-flex; gap: .25rem; margin-left: auto; }
.maket-oyun-serit__dugme {
  padding: .2rem .6rem; border-radius: 7px; text-decoration: none;
  font-size: .76rem; font-weight: 600;
  color: var(--bs-secondary-color); background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}
.maket-oyun-serit__dugme:hover { color: var(--bs-body-color); }
.maket-oyun-serit__dugme.etkin {
  background: var(--oyun-renk); border-color: var(--oyun-renk); color: #fff;
}

/* Envanter tablosunda oyun etiketi (madde 28). Servis listesinde bu
   etiket artik YOK - orada oyun grup basligina cikti. */
.maket-oyun-etiket {
  display: inline-block; padding: .03rem .38rem; border-radius: 5px;
  font-size: .62rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; vertical-align: middle;
}
.maket-oyun-etiket--lol {
  background: rgba(200, 155, 60, .18); color: #96701d;
}
.maket-oyun-etiket--valorant {
  background: rgba(224, 72, 95, .14); color: #e0485f;
}

/* ===================================================================
   OYUN LOGOLARI ve MARKA ZEMINLERI
   Kullanici (2026-10-05): "illustrasyon kullanmak yerine bu logoyu
   kullanabiliriz, ancak hero formunun arka plan rengi uyumlu olmali."

   Logo kendi renginde duruyor (LoL altin, Valorant pembe), bu yuzden
   zemin de o oyunun kendi paletinden kuruldu - genel erik/gul gradyanin
   ustunde logo yama gibi duruyordu.
     LoL      : koyu lacivert #0a1428 + altin #c89b3c  (Riot'un paleti)
     Valorant : koyu #0f1923 + pembe #ff4655           (logonun tam degeri)
   =================================================================== */
.maket-yukleme-serit--lol {
  background-image:
    radial-gradient(70% 110% at 84% 16%, rgba(200, 155, 60, .30) 0%, transparent 60%),
    linear-gradient(116deg, #0a1428 0%, #132b45 54%, #1d4260 100%);
}
.maket-yukleme-serit--lol .maket-yukleme-serit__alt b { color: #e8c88a; }
.maket-yukleme-serit--lol .maket-yukleme-adim--aktif .maket-yukleme-adim__no {
  background: #c89b3c;
}
.maket-yukleme-serit--lol .maket-yukleme-adim--aktif .maket-yukleme-adim__kutu {
  color: #0a1428;
}

.maket-yukleme-serit--valorant {
  background-image:
    radial-gradient(70% 110% at 84% 16%, rgba(255, 70, 85, .26) 0%, transparent 60%),
    linear-gradient(116deg, #0f1923 0%, #2a1119 52%, #4a1d26 100%);
}
.maket-yukleme-serit--valorant .maket-yukleme-serit__alt b { color: #ff8e99; }
.maket-yukleme-serit--valorant .maket-yukleme-adim--aktif .maket-yukleme-adim__no {
  background: #ff4655;
}
.maket-yukleme-serit--valorant .maket-yukleme-adim--aktif .maket-yukleme-adim__kutu {
  color: #0f1923;
}

/* Hero logosu: genislik degil YUKSEKLIK sabitleniyor - iki logonun en-boy
   orani cok farkli (LoL yatay uzun, Valorant daha kompakt), genislik
   sabitlenirse biri devasa digeri kucucuk kalirdi. */
.maket-oyun-logo {
  display: block; width: auto; max-width: 100%;
  height: 58px; object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}
.maket-yukleme-serit__gorsel { flex: 0 0 auto; max-width: 230px; }
@media (max-width: 767.98px) {
  .maket-yukleme-serit__gorsel { display: none; }
}

/* Ust oyun seridindeki kucuk logo */
.maket-oyun-serit__logo {
  height: 17px; width: auto; display: block;
}

/* ===================================================================
   ANA SAYFA SAYAC KARTLARI - oyun kirilimi ve dikey denge
   Kullanici (2026-10-05): "formlarin arka planlari yukari kaymis ve
   yayindaki ilan formu ile sistem sagligi formundaki lol ve valorant
   verilerinin AYRI ve DAHA ANLASILIR olmasi gerekiyor."

   Iki ayri sorun vardi:
   1) Kirilim tek satirda yan yanaydi, iki sayi birbirine karisiyordu.
      Artik her oyun kendi satirinda, renk noktasiyla, degeri saga
      hizali ve tabular - alt alta okunuyor.
   2) Kartlar izgarada hero'nun yuksekligine esitlendigi icin icerik
      yukarida topaklanip altta buyuk bir bosluk kaliyordu; kose deseni
      de o boslukta kocaman duruyordu ("arka plan yukari kaymis" denen
      sey buydu). Govde artik dikeyde yayiliyor ve desen sag-alta
      sabitlenip olcusu sinirlandi.
   =================================================================== */
.maket-ust-izgara > * > .card > .card-body {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: .5rem;
}
/* Kose deseni: kart uzadikca "contain" onu da buyutuyordu. Sag-alta
   sabit, yuksekligin en fazla %62'si kadar. */
.maket-ust-izgara .bg-corner-img {
  background-position: right bottom;
  background-size: auto 62%;
}

.maket-kirilim {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .22rem;
}
.maket-kirilim__satir {
  display: flex; align-items: center; gap: .45rem;
  padding: .14rem .45rem; border-radius: 7px;
  background: var(--bs-tertiary-bg);
  font-size: .78rem;
}
.maket-kirilim__satir--soluk { opacity: .72; }
.maket-kirilim__nokta {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.maket-kirilim__nokta--lol      { background: #c89b3c; }
.maket-kirilim__nokta--valorant { background: #ff4655; }
.maket-kirilim__ad { font-weight: 600; }
.maket-kirilim__not {
  font-size: .68rem; color: var(--bs-secondary-color);
  padding: .02rem .3rem; border-radius: 4px;
  background: var(--bs-secondary-bg);
}
.maket-kirilim__deger {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Kirilimda "ortak" satiri - bir oyuna ait degil, ikisine birden hizmet
   eder; notr renk tasir ki oyun satirlariyla karismasin. */
.maket-kirilim__nokta--ortak { background: var(--bs-secondary-color); }

/* Dar sutunlardaki kimlik dugmesi (Magaza Hesaplari tablosu): e-posta tam
   haliyle 226px kapliyordu ve tablo kaba tasiyordu. Tam deger ipucunda ve
   data-deger'de duruyor - kirpma yalnizca GORUNUMDE. */
.maket-kimlik--dar { max-width: 168px; }

/* PARA CEKME AGLARI tablosu (A6). Rakamlar sutun halinde hizalanmali:
   tabular-nums olmadan 1,25 ile 11,25 farkli genislikte basilir ve goz
   "hangisi daha ucuz" sorusunu tablodan okuyamaz. */
.maket-cekim td,
.maket-cekim th { font-variant-numeric: tabular-nums; }
.maket-cekim td:first-child { white-space: nowrap; }

/* --- Sag yigin: Guncel Kurlar + Not Defteri (kullanici 2026-10-07) ------
   Kurlar kendi dogal boyunda kalir, not defteri KALANI doldurur. Boylece
   sag kolonun dibi soldaki izgarayla hizali biter - sabit yukseklik
   verilseydi iki kolon farkli yerde biterdi. */
.maket-sag-yigin { display: flex; flex-direction: column; gap: 1rem; }
.maket-sag-yigin > .card { margin-bottom: 0; }
.maket-kur { flex: 0 0 auto; }  /* bkz. yukarida height:auto */
.maket-not { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 150px; }
.maket-not__govde { flex: 1 1 auto; display: flex; }
.maket-not__alan {
  flex: 1 1 auto;
  resize: none;
  min-height: 110px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.maket-not__durum { font-size: 0.75rem; color: var(--bs-secondary-color); }


/* --- Dort sayac karti: HER genislikte birbirine esit ------------------
   KULLANICI (2026-10-07): "dort formun boyutlari esit olmali". Kendi alt
   izgaralarinda durmalari sart: ust izgaranin dogrudan cocugu olsalardi
   mobilde iki satira bolunur ve satir boylari ayrisirdi (olculdu: 390px'te
   190,5'e karsi 126,2 - fark, ilk iki kartta oyun kirilimi listesi
   olmasindan geliyor). Burada `grid-auto-rows:1fr` kac satira bolunurse
   bolunsun hepsini esitler. */
.maket-ust-izgara__genis--tam { grid-column: 1 / -1; }
.maket-sayac-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
}
.maket-sayac-izgara > * { min-width: 0; }
.maket-sayac-izgara > * > .card { height: 100%; margin-bottom: 0; }

@media (max-width: 991px) {
  .maket-sayac-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .maket-sayac-izgara { grid-template-columns: minmax(0, 1fr); }
}

/* --- MADDE 8: ilan adi tam gorunsun (kullanici 2026-10-12) -------------
   Eskiden `text-truncate` + `max-width:250px` idi: G2G basliklari 128
   karaktere kadar cikarken hucrede ~35 karakter goruluyordu, gerisi
   yalnizca fare ipucundaydi. Ad artik SARIYOR.

   Neden `width` degil `min-width`: tablo sutunu icerige gore nefes
   alabilsin, ama dar ekranda da 0'a cokmesin. Satir yuksekligi buyur -
   kullanicinin istedigi bu: adin TAMAMI gorunsun. */
.maket-ilan-ad {
  white-space: normal;
  overflow-wrap: anywhere;   /* uzun, bosluksuz basliklar da sarsin */
  min-width: 260px;
  max-width: 520px;
  line-height: 1.35;
}
@media (max-width: 991px) {
  /* OLCULDU: `min-width: 0` dar ekranda sutunu 63 piksele cokertip basligi
     15 satira yayiyordu - "tam gorunsun" istegi okunamaz hale geliyordu.
     Tablo zaten .table-responsive icinde, yani yatay kaydirma var:
     makul bir taban genislik korunur. */
  .maket-ilan-ad { min-width: 200px; max-width: 320px; }
}

/* --- [hidden] Bootstrap'in d-* siniflarina YENILIYORDU ------------------
   OLCULEN HATA (2026-10-12, madde 7): Toplu Islem kartindaki
   "Tablodaki secim ve filtreler KULLANILMAZ - yayindaki tum ilanlar
   etkilenir" uyarisi, `hidden` isaretli OLMASINA RAGMEN her zaman
   gorunuyordu. Sebep: Bootstrap `.d-flex { display: flex !important }`
   kurali, HTML'in `[hidden]` davranisini (display:none) eziyor.

   Bu kozmetik degildi: kullanici "Delist Et (secili)" secmisken
   "yayindaki TUM ilanlar etkilenir" uyarisini goruyordu - yanlis
   yonlendirme.

   Tek tek elemanlari duzeltmek yerine SINIFIN TAMAMI kapatiliyor:
   `hidden` isaretli hicbir sey gorunmez. Ayni tuzak panelde baska
   yerlerde de var (admin_action_progress) ve ileride yine kurulurdu. */
[hidden] { display: none !important; }