/* ==========================================================================
   lister -- operasyon kokpiti.

   Pazarlama sayfasi degil: iki kisi, her gun, yogun veri ve para rakami.
   Sakin, siki, sussuz.

   HARICI HICBIR SEY: CDN yok, web font yok, ikon kutuphanesi yok.
   Simgeler satir ici SVG.  Panel cevrimdisi da acilir.

   Olcek 13.6" MacBook Air'e gore secildi: ~1470x860 kullanilabilir alan.
   Dikey yer kit oldugu icin satir yuksekligi ve ic bosluklar yogun.
   ========================================================================== */

:root {
    /* ---- cekirdek: 6 renk ------------------------------------------- */
    --kagit:    #f7f6f3;   /* sayfa zemini -- sicak kirik beyaz, gri degil */
    --yuzey:    #ffffff;   /* kart -- kirik beyazin ustunde saf beyaz */
    --murekkep: #14211b;   /* metin -- siyah degil, yesile calan koyu */
    --cam:      #12291f;   /* kenar cubugu -- derin cam */
    --yesil:    #2d6a4f;   /* accent: birincil dugme, aktif menu, ilerleme */
    --cizgi:    #dcdad2;   /* 1px kenarlik -- kagitla ayni sicak ailede */

    /* Accent'in tureyenleri.  Yesil YALNIZ vurgu tasiyan yerlerde:
       birincil dugme, aktif menu, ilerleme cubugu, basari, rahat marj. */
    --yesil-koyu:  #1b4332;
    --yesil-acik:  #d7e9df;
    --yesil-sis:   #eff6f2;

    /* ---- durum: accent'ten AYRI eksen -------------------------------- */
    --hata:          #b42318;
    --hata-zemin:    #fef3f2;
    --hata-cizgi:    #f2b8b2;
    --uyari:         #b54708;
    --uyari-zemin:   #fffaeb;
    --uyari-cizgi:   #f0ca8f;
    --bekleyen:      #667085;
    --bekleyen-zemin:#f2f4f7;
    --bilgi:         #175cd3;
    --bilgi-zemin:   #eff6ff;

    /* ---- notr tureyenler --------------------------------------------- */
    --metin-2:  #55605a;
    --sessiz:   #838d87;
    --cizgi-2:  #c9c6bc;      /* daha belirgin ayirac */

    /* Kenar cubugu ici */
    --cam-metin:  #e6ece8;
    --cam-sessiz: #8ea79a;
    --cam-cizgi:  #233d31;
    --cam-hover:  #1b3a2b;

    /* ---- bosluk: 4'un katlari, baska deger yok ----------------------- */
    --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px;
    --b5: 24px; --b6: 32px; --b7: 48px;

    /* ---- olcu -------------------------------------------------------- */
    --kenar-genis: 216px;    /* etiketler sigacak kadar, fazlasi degil */
    --kenar-dar:   56px;
    --icerik-tavan: 1260px;

    --r-kart:    10px;
    --r-kontrol:  6px;

    /* Tek yigin degil IKI yigin.  Ayrim anlamsal: arayuz sistem
       fontunda, VERI monospace'te.  Bu panelin icerigi ASIN, SKU ve
       para rakamlarindan ibaret -- tipografi de bunu soylesin. */
    --f-arayuz: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --f-veri:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--kagit);
    color: var(--murekkep);
    font-family: var(--f-arayuz);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Klavye odagi HER odaklanabilir ogede gorunur.  Fare tiklamasinda
   cikmasin diye :focus degil :focus-visible. */
:focus-visible {
    outline: 2px solid var(--yesil);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ==========================================================================
   VERI TIPOGRAFISI -- imzanin temeli
   ========================================================================== */

/* ASIN, SKU, para, agirlik, yuzde, tarih, ilan kimligi: hepsi tek
   genislikli ve rakamlar tabular, ki basamaklar alt alta hizalansin. */
.veri, code, .para, td.sayi, th.sayi, .mono, .cipa, .kod {
    font-family: var(--f-veri);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code, .kod {
    font-size: 12px;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--murekkep);
}

/* ==========================================================================
   IMZA: MARJ SERIDI
   ==========================================================================
   Bu isin tek gercek kisiti net >= taban.  Sync motoru urunleri tam da
   tabana yakinligina gore siraliyor (syncer.margin_band).  Serit o bandi
   gosteriyor: panelin gosterdigi ile motorun baktigi ayni yerden geliyor.

       altinda  kirmizi   tabanin altinda -- ilan acilmaz / pasife alinir
       dar      amber     taban + $2      -- motor 3 saatte bir bakiyor
       orta     gri       taban + $4      -- 9 saatte bir
       rahat    yesil     daha uzak       -- gunde bir
*/

.cipa {
    display: inline-flex;
    align-items: baseline;
    gap: var(--b2);
    padding-left: var(--b3);
    border-left: 3px solid var(--cizgi-2);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.cipa .alt {
    font-family: var(--f-arayuz);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--sessiz);
    letter-spacing: 0;
}

/* Tabloda ayni oge, kucuk hali */
.marj {
    display: inline-block;
    padding-left: var(--b2);
    border-left: 3px solid var(--cizgi-2);
    font-weight: 600;
}

.cipa.altinda, .marj.altinda { border-left-color: var(--hata);     color: var(--hata); }
.cipa.dar,     .marj.dar     { border-left-color: var(--uyari);    color: var(--uyari); }
.cipa.orta,    .marj.orta    { border-left-color: var(--bekleyen); }
.cipa.rahat,   .marj.rahat   { border-left-color: var(--yesil);    color: var(--yesil-koyu); }

/* Dusuk maliyet UYARISI -- marj bandindan AYRI eksen. Marj serit rengiyle
   konusuyor (kar tabanina uzaklik), bu amber metinle konusuyor (carpan).
   Ikisi ayni ogeyi paylassaydi "karsiz" ile "pahali gorunuyor" ayirt
   edilemezdi; bunlar farkli sorunlar ve farkli kararlar gerektiriyor. */
.dusuk-maliyet { color: var(--uyari); font-weight: 600; }

.kart-ic.carpan {
    display: flex; align-items: center; gap: var(--b2);
    font-size: 12.5px; color: var(--sessiz);
    padding-top: var(--b3); padding-bottom: var(--b3);
}
.kart-ic.carpan strong { color: var(--murekkep); font-weight: 600; }
.kart-ic.carpan.dusuk-maliyet strong { color: var(--uyari); }

/* ==========================================================================
   YERLESIM
   ========================================================================== */

.govde { display: flex; min-height: 100vh; }

/* ---------------------------------------------------------- kenar cubugu */

.kenar {
    width: var(--kenar-genis);
    flex: none;
    background: var(--cam);
    color: var(--cam-metin);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .16s ease;
}
body.dar .kenar { width: var(--kenar-dar); }

@media (prefers-reduced-motion: reduce) {
    .kenar { transition: none; }
}

.kenar .marka {
    display: flex;
    align-items: center;
    gap: var(--b3);
    padding: var(--b4);
    border-bottom: 1px solid var(--cam-cizgi);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
}
.kenar .marka .im {
    flex: none;
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--yesil);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--f-veri);
    font-size: 13px;
    font-weight: 700;
}

.kenar nav { padding: var(--b3) var(--b2); flex: 1; overflow-y: auto; }

.kenar nav a {
    display: flex;
    align-items: center;
    gap: var(--b3);
    padding: var(--b2) var(--b3);
    margin-bottom: 2px;
    border-radius: var(--r-kontrol);
    border-left: 3px solid transparent;
    color: var(--cam-metin);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
}
.kenar nav a:hover { background: var(--cam-hover); }
.kenar nav a svg { flex: none; width: 17px; height: 17px; }

/* Aktif sayfa: yesil sol cubuk + acik zemin.  Tek bakista belli. */
.kenar nav a[aria-current="page"] {
    background: var(--yesil-koyu);
    border-left-color: var(--yesil);
    color: #fff;
    font-weight: 600;
}

.kenar nav .sayac {
    margin-left: auto;
    font-family: var(--f-veri);
    font-size: 11px;
    font-weight: 700;
    min-width: 19px;
    padding: 0 5px;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: var(--hata);
    color: #fff;
}

/* Alt blok: son sync + acik hata, HER SAYFADAN gorunur */
.kenar .dip {
    border-top: 1px solid var(--cam-cizgi);
    padding: var(--b3) var(--b2) var(--b2);
    font-size: 12px;
    color: var(--cam-sessiz);
}
.kenar .dip .satir {
    display: flex;
    align-items: center;
    gap: var(--b2);
    padding: var(--b1) var(--b3);
    border-radius: var(--r-kontrol);
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.kenar .dip a.satir:hover { background: var(--cam-hover); color: var(--cam-metin); }
.kenar .dip .nokta {
    flex: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--yesil);
}
.kenar .dip .nokta.uyari { background: var(--uyari); }
.kenar .dip .nokta.hata  { background: var(--hata); }
.kenar .dip .deger { font-family: var(--f-veri); color: var(--cam-metin); margin-left: auto; }

.kenar .daralt {
    display: flex;
    align-items: center;
    gap: var(--b3);
    width: 100%;
    margin-top: var(--b1);
    padding: var(--b2) var(--b3);
    background: none;
    border: none;
    border-radius: var(--r-kontrol);
    color: var(--cam-sessiz);
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}
.kenar .daralt:hover { background: var(--cam-hover); color: var(--cam-metin); }
.kenar .daralt svg { flex: none; width: 15px; height: 15px; transition: transform .16s ease; }
body.dar .kenar .daralt svg { transform: rotate(180deg); }

/* Daraldiginda yalniz simgeler */
body.dar .kenar .etiket,
body.dar .kenar .marka span:not(.im),
body.dar .kenar .dip .metin { display: none; }
body.dar .kenar nav a,
body.dar .kenar .daralt { justify-content: center; padding-left: var(--b2); padding-right: var(--b2); }
body.dar .kenar nav a { border-left-width: 0; border-right: 3px solid transparent; }
body.dar .kenar nav a[aria-current="page"] { border-right-color: var(--yesil); }
body.dar .kenar .marka { justify-content: center; padding-left: var(--b2); padding-right: var(--b2); }
body.dar .kenar .dip .satir { justify-content: center; }
body.dar .kenar nav .sayac { margin-left: 0; }

/* Mobil acilir menu dugmesi -- genis ekranda yok */
.mobil-ac { display: none; }

/* ------------------------------------------------------------------ icerik */

.icerik { flex: 1; min-width: 0; padding: var(--b5); }
.icerik > .ic { max-width: var(--icerik-tavan); margin: 0 auto; }

/* ==========================================================================
   BASLIK
   ========================================================================== */

h1 {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0 0 var(--b4);
    display: flex;
    align-items: center;
    gap: var(--b3);
    flex-wrap: wrap;
}
h2 { font-size: 13px; font-weight: 650; margin: 0 0 var(--b3); }
h3 { font-size: 12px; font-weight: 650; margin: 0 0 var(--b2); color: var(--metin-2); }

p { margin: 0 0 var(--b3); }
p:last-child { margin-bottom: 0; }

a { color: var(--yesil-koyu); }
a:hover { color: var(--yesil); }

.sessiz  { color: var(--sessiz); font-size: 12.5px; }
.ikincil { color: var(--metin-2); }
.eksi    { color: var(--hata); }
.arti    { color: var(--yesil-koyu); }

/* ==========================================================================
   KART -- baslik bolgesi ile icerik AYRI
   ========================================================================== */

.kart {
    background: var(--yuzey);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-kart);
    margin-bottom: var(--b4);
    overflow: hidden;
}

.kart-basi {
    display: flex;
    align-items: center;
    gap: var(--b3);
    padding: var(--b3) var(--b4);
    background: var(--kagit);
    border-bottom: 1px solid var(--cizgi);
}
.kart-basi h2, .kart-basi h3 { margin: 0; }
.kart-basi .sag { margin-left: auto; display: flex; align-items: center; gap: var(--b2); }

.kart-ic { padding: var(--b4); }
.kart-ic.sifir { padding: 0; }

/* Kart durumu KENARLIKTAN okunur, golgeden degil */
.kart.vurgu   { border-color: var(--yesil); }
.kart.vurgu   > .kart-basi { background: var(--yesil-sis); border-bottom-color: var(--yesil-acik); }
.kart.hatali  { border-color: var(--hata-cizgi); }
.kart.hatali  > .kart-basi { background: var(--hata-zemin); border-bottom-color: var(--hata-cizgi); }
.kart.uyarili { border-color: var(--uyari-cizgi); }
.kart.uyarili > .kart-basi { background: var(--uyari-zemin); border-bottom-color: var(--uyari-cizgi); }

.izgara {
    display: grid;
    gap: var(--b3);
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: var(--b4);
}
.izgara .kart { margin-bottom: 0; }

/* Sayac karti */
.sayac-kart .sayi {
    font-family: var(--f-veri);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.sayac-kart .etiket { color: var(--metin-2); font-size: 12.5px; margin-top: 2px; }
.sayac-kart .etiket a { color: inherit; text-decoration: none; }
.sayac-kart .etiket a:hover { color: var(--yesil); text-decoration: underline; }
.sayac-kart.iyi   .sayi { color: var(--yesil-koyu); }
.sayac-kart.uyari .sayi { color: var(--uyari); }
.sayac-kart.hata  .sayi { color: var(--hata); }

/* Olcu serisi */
.olcu { display: flex; gap: var(--b5); flex-wrap: wrap; }
.olcu > div { min-width: 84px; }
.olcu .etiket {
    font-size: 10.5px; color: var(--sessiz);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.olcu .deger {
    font-family: var(--f-veri);
    font-variant-numeric: tabular-nums;
    font-size: 16px; font-weight: 600;
}

/* ==========================================================================
   ROZET
   ========================================================================== */

.rozet {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    white-space: nowrap;
    background: var(--bekleyen-zemin);
    color: var(--bekleyen);
}
.rozet.done, .rozet.listed, .rozet.ok, .rozet.tam, .rozet.resume, .rozet.active {
    background: var(--yesil-acik); color: var(--yesil-koyu);
}
.rozet.running, .rozet.drafted, .rozet.priced, .rozet.reprice {
    background: var(--bilgi-zemin); color: var(--bilgi);
}
.rozet.paused, .rozet.inactive, .rozet.uyari, .rozet.resumable,
.rozet.pause, .rozet.environmental, .rozet.kargo_bekliyor {
    background: var(--uyari-zemin); color: var(--uyari);
}
.rozet.rejected, .rozet.error, .rozet.failed, .rozet.stopped,
.rozet.deactivate, .rozet.config, .rozet.hata {
    background: var(--hata-zemin); color: var(--hata);
}
.rozet.pending, .rozet.bekliyor, .rozet.item {
    background: var(--bekleyen-zemin); color: var(--bekleyen);
}

/* ==========================================================================
   ILERLEME
   ========================================================================== */

.cubuk {
    height: 7px;
    background: var(--cizgi);
    border-radius: 999px;
    overflow: hidden;
}
.cubuk .dolu {
    height: 100%;
    width: 0;
    background: var(--yesil);
    border-radius: 999px;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* Calisirken dolu kisim akar */
.cubuk.calisiyor .dolu {
    background-image: linear-gradient(100deg,
        rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 80%);
    background-size: 200% 100%;
    animation: akis 1.4s linear infinite;
}
/* Ilk urun islenirken yuzde hala 0 ve dolu kisim sifir genislikte --
   cubuk olu gorunur.  O yuzden RAY da hareket etsin. */
.cubuk.calisiyor {
    background-image: linear-gradient(100deg,
        var(--cizgi) 40%, var(--yesil-acik) 50%, var(--cizgi) 60%);
    background-size: 200% 100%;
    animation: akis 1.8s linear infinite;
}
@keyframes akis { from { background-position: 180% 0; } to { background-position: -80% 0; } }

.cubuk.hatali .dolu { background: var(--hata); }

.nabiz {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--yesil);
    animation: nabiz 1.3s ease-in-out infinite;
    flex: none;
}
@keyframes nabiz {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.8); }
}

@media (prefers-reduced-motion: reduce) {
    .cubuk .dolu { transition: none; }
    .cubuk.calisiyor, .cubuk.calisiyor .dolu, .nabiz { animation: none; }
}

/* ---------------------------------------------------------- asama gostergesi */

.asamalar { display: flex; align-items: center; gap: var(--b1); flex-wrap: wrap; margin-top: var(--b3); }
.asama {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--sessiz);
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    white-space: nowrap;
}
.asama.gecildi { color: var(--yesil-koyu); background: var(--yesil-sis); border-color: var(--yesil-acik); }
.asama.aktif {
    color: var(--yesil-koyu); background: var(--yesil-acik);
    border-color: var(--yesil); font-weight: 600;
}
.asamalar .ayirac { color: var(--cizgi-2); font-size: 11px; user-select: none; }

/* ==========================================================================
   TABLO
   ========================================================================== */

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sessiz);
    padding: var(--b2) var(--b3);
    background: var(--kagit);
    border-bottom: 1px solid var(--cizgi-2);
    white-space: nowrap;
}

td {
    padding: 9px var(--b3);
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--yesil-sis); }

/* Para ve sayi sutunlari saga yasli, tek genislikli.  Alt alta duran
   tutarlarin basamaklari hizalanmazsa goz karsilastiramaz. */
td.sayi, th.sayi { text-align: right; white-space: nowrap; }

.kaydir { overflow-x: auto; }

/* ==========================================================================
   DUGME
   ========================================================================== */

button, .dugme {
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    padding: 6px 13px;
    border-radius: var(--r-kontrol);
    border: 1px solid var(--cizgi-2);
    background: var(--yuzey);
    color: var(--murekkep);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    line-height: 1.45;
}
button:hover, .dugme:hover { background: var(--kagit); border-color: var(--sessiz); }
button:disabled, .dugme.pasif { opacity: .45; cursor: not-allowed; }
button:disabled:hover { background: var(--yuzey); border-color: var(--cizgi-2); }

button.birincil, .dugme.birincil {
    background: var(--yesil); border-color: var(--yesil); color: #fff;
}
button.birincil:hover, .dugme.birincil:hover {
    background: var(--yesil-koyu); border-color: var(--yesil-koyu);
}

button.tehlike { border-color: var(--hata-cizgi); color: var(--hata); }
button.tehlike:hover { background: var(--hata-zemin); border-color: var(--hata); }

button.kucuk, .dugme.kucuk { padding: 3px 9px; font-size: 12px; }

button.baglanti {
    border: none; background: none; padding: var(--b2);
    color: var(--metin-2); font-weight: 400;
}
button.baglanti:hover { color: var(--murekkep); background: none; }

.dugmeler { display: flex; gap: var(--b2); align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   FORM
   ========================================================================== */

label { display: block; font-size: 12.5px; font-weight: 550; margin-bottom: var(--b1); }

input[type=text], input[type=password], input[type=number], select, textarea {
    font: inherit;
    font-size: 13px;
    padding: 6px 9px;
    border: 1px solid var(--cizgi-2);
    border-radius: var(--r-kontrol);
    background: var(--yuzey);
    color: var(--murekkep);
    width: 100%;
}
/* Sayi ve kod girdileri de tek genislikli -- okunan ile yazilan ayni
   bicimde gorunsun. */
input[type=number], textarea {
    font-family: var(--f-veri);
    font-variant-numeric: tabular-nums;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--yesil);
    box-shadow: 0 0 0 3px var(--yesil-sis);
}
textarea { min-height: 128px; font-size: 12.5px; }

.satir { display: flex; gap: var(--b2); align-items: center; flex-wrap: wrap; }
.satir input { width: auto; }

/* Cikarilan eksen degeri: TABLODA DA ayrismali. Ilk halinde yalnizca
   ayri bir liste vardi ve satir hic degismiyordu -- kullanici ayni
   satira ikinci kez "Cikar" basiyordu. */
tr.cikarildi td { opacity: .5; }
tr.cikarildi td:nth-child(2) { text-decoration: line-through; }
tr.cikarildi td:last-child { opacity: 1; text-decoration: none; }

/* ------------------------------------------------------------- ayar satiri */

.ayar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: var(--b4);
    align-items: start;
    padding: var(--b3) var(--b4);
    border-bottom: 1px solid var(--cizgi);
}
.ayar:last-child { border-bottom: none; }
/* Cok satirli ayar (sahne istemleri) tek sutuna geciyor: 190px'lik deger
   kolonunda bes satirlik bir istem duzenlenemez. */
.ayar.uzun { grid-template-columns: minmax(0, 1fr); }
.ayar.uzun .deger { text-align: left; }
.ayar.uzun textarea { width: 100%; min-height: 92px; }
.ayar .ad { display: flex; align-items: center; gap: var(--b2); font-weight: 550; }
.ayar .anahtar {
    font-family: var(--f-veri);
    font-size: 11px;
    color: var(--sessiz);
    margin-top: 1px;
}
.ayar .deger { text-align: right; }
.ayar .birim { font-size: 10.5px; color: var(--sessiz); margin-top: 2px; }

/* ==========================================================================
   IPUCU (i)
   ==========================================================================
   JS yok: :hover ve :focus-visible yetiyor.  Klavyeyle de acilabilsin
   diye <button>. */

.ipucu {
    position: relative;
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 15px; height: 15px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cizgi-2);
    background: var(--yuzey);
    color: var(--sessiz);
    font-family: var(--f-veri);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    flex: none;
}
.ipucu:hover { border-color: var(--yesil); color: var(--yesil); background: var(--yesil-sis); }

.ipucu .balon {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    width: 290px; max-width: 76vw;
    padding: var(--b3);
    background: var(--cam);
    color: var(--cam-metin);
    border-radius: var(--r-kontrol);
    font-family: var(--f-arayuz);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    opacity: 0; visibility: hidden;
    transition: opacity .13s ease, transform .13s ease;
    z-index: 30;
    pointer-events: none;
}
.ipucu .balon::after {
    content: "";
    position: absolute; top: 100%; left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--cam);
}
.ipucu:hover .balon, .ipucu:focus-visible .balon {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.ipucu.sol .balon { left: 0; transform: translateX(0) translateY(3px); }
.ipucu.sol:hover .balon, .ipucu.sol:focus-visible .balon { transform: translateX(0) translateY(0); }
.ipucu.sol .balon::after { left: 12px; }

@media (prefers-reduced-motion: reduce) {
    .ipucu .balon { transition: none; }
}

/* ==========================================================================
   BILDIRIM / FILTRE / DETAY
   ========================================================================== */

.bildirim {
    padding: var(--b3) var(--b4);
    border: 1px solid var(--cizgi);
    border-left-width: 3px;
    border-radius: var(--r-kontrol);
    margin-bottom: var(--b4);
    background: var(--yuzey);
}
.bildirim.ok, .bildirim.basari {
    background: var(--yesil-sis); border-color: var(--yesil-acik);
    border-left-color: var(--yesil); color: var(--yesil-koyu);
}
.bildirim.hata, .bildirim.error {
    background: var(--hata-zemin); border-color: var(--hata-cizgi);
    border-left-color: var(--hata); color: var(--hata);
}
.bildirim.uyari {
    background: var(--uyari-zemin); border-color: var(--uyari-cizgi);
    border-left-color: var(--uyari); color: var(--uyari);
}
.bildirim.bilgi, .bildirim.mesaj {
    background: var(--bilgi-zemin); border-color: #b6cef5;
    border-left-color: var(--bilgi); color: var(--bilgi);
}

.filtre { font-size: 12.5px; color: var(--metin-2); margin: 0; }

.filtreler { display: flex; gap: var(--b2); flex-wrap: wrap; margin-bottom: var(--b4); }
.filtreler a {
    padding: 4px 11px;
    border: 1px solid var(--cizgi-2);
    border-radius: 999px;
    background: var(--yuzey);
    color: var(--metin-2);
    text-decoration: none;
    font-size: 12.5px;
}
.filtreler a:hover { border-color: var(--sessiz); color: var(--murekkep); }
.filtreler a.secili { background: var(--yesil); color: #fff; border-color: var(--yesil); font-weight: 550; }

details summary { cursor: pointer; font-size: 12.5px; color: var(--metin-2); padding: var(--b2) 0; }
details summary:hover { color: var(--murekkep); }

.bos { text-align: center; padding: var(--b6) var(--b4); color: var(--sessiz); }

hr { border: none; border-top: 1px solid var(--cizgi); margin: var(--b4) 0; }

/* ==========================================================================
   GIRIS
   ========================================================================== */

.giris { max-width: 330px; margin: 12vh auto 0; }
.giris .marka {
    display: flex; align-items: center; justify-content: center; gap: var(--b3);
    font-size: 18px; font-weight: 700; color: var(--yesil-koyu);
    margin-bottom: var(--b5);
}
.giris .marka .im {
    width: 26px; height: 26px; border-radius: 6px;
    background: var(--yesil); color: #fff;
    display: grid; place-items: center;
    font-family: var(--f-veri); font-size: 14px;
}

/* ==========================================================================
   URUN DETAYI
   ========================================================================== */

.dokum { width: 100%; }
.dokum td { padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.dokum tr:last-child td { border-bottom: none; }
.dokum td.para { text-align: right; white-space: nowrap; font-weight: 550; }
.dokum tr.toplam td {
    border-top: 2px solid var(--cizgi-2); border-bottom: none;
    padding-top: var(--b3); font-weight: 650; font-size: 15px;
}
.dokum tr.toplam td.para { color: var(--yesil-koyu); }
/* Indirim varken kar LISTE degil bu satirdan cikiyor */
.dokum tr.vurgu td { background: var(--yesil-sis); font-weight: 600; }

.onizleme {
    margin-top: var(--b3);
    padding: var(--b3);
    border: 1px dashed var(--yesil);
    border-radius: var(--r-kontrol);
    background: var(--yesil-sis);
    font-size: 12.5px;
    line-height: 1.7;
}
.onizleme.gizli { display: none; }

.gorseller {
    display: grid; gap: var(--b3);
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.gorseller figure {
    margin: 0; border: 1px solid var(--cizgi);
    border-radius: var(--r-kontrol); overflow: hidden; background: var(--yuzey);
}
/* Markali gorsel Etsy'ye YUKLENMIYOR; cerceve bunu tek bakista soylesin */
.gorseller figure.markali { border-color: var(--uyari-cizgi); background: var(--uyari-zemin); }
.gorseller figure.temiz   { border-color: var(--yesil-acik); }
.gorseller img {
    display: block; width: 100%; aspect-ratio: 1;
    object-fit: contain; background: var(--kagit);
}
.gorseller figcaption { padding: var(--b2); font-size: 11.5px; }
.gorseller .gerekce { color: var(--metin-2); font-size: 11px; line-height: 1.45; margin: var(--b1) 0 var(--b2); }
.gorseller form { display: flex; gap: var(--b1); }
.gorseller input { font-size: 11px; padding: 2px 5px; min-width: 0; }
.gorseller button { font-size: 11px; padding: 2px 7px; white-space: nowrap; }

.seo .baslik {
    font-size: 15px; font-weight: 600; line-height: 1.4;
    color: var(--yesil-koyu); margin-bottom: var(--b1);
}
.seo .aciklama {
    white-space: pre-wrap;
    font-family: var(--f-arayuz);
    font-size: 12.5px; line-height: 1.6;
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-kontrol);
    padding: var(--b3); margin: var(--b3) 0;
    max-height: 280px; overflow-y: auto;
}
.seo .etiketler { display: flex; flex-wrap: wrap; gap: var(--b2); margin-bottom: var(--b2); }
.seo .etiketler .etiket {
    background: var(--yesil-sis); border: 1px solid var(--yesil-acik);
    color: var(--yesil-koyu); border-radius: 999px;
    padding: 1px 9px; font-size: 11.5px;
}
/* Etsy tag siniri 20 karakter; sayac yaninda dursun ki asan gorunsun */
.seo .etiketler em {
    font-style: normal; font-family: var(--f-veri);
    color: var(--sessiz); font-size: 10px; margin-left: 3px;
}

/* ==========================================================================
   KUYRUK / SIPARIS
   ========================================================================== */

.is-karti .cubuk { margin-bottom: var(--b2); }
.is-karti .simdi {
    display: flex; align-items: center; gap: var(--b2);
    margin: 0; min-height: 20px; font-size: 12.5px;
}
.is-karti .eylemler:empty { display: none; }
.is-karti .eylemler { margin-top: var(--b3); }

/* ==========================================================================
   SIPARIS DEFTERI
   Muhasebe programi gibi gorunuyordu: iki sayi girmek icin dort kutu ve iki
   kaydet dugmesi. Kargo asamasi kalkinca satir basina TEK giris kaldi.
   ========================================================================== */
.siparisler input[type=number] { width: 84px; }
.siparisler input[name=amazon_order_no] { width: 156px; }
.siparisler td { vertical-align: top; }
.siparisler td.urun { max-width: 260px; }

/* Maliyet + siparis no + kaydet: TEK satir, tek form. */
.satir-giris {
    display: flex; align-items: center; gap: var(--b2);
    margin: 0; flex-wrap: nowrap;
}

/* Baslik uzun; satiri sismesin diye tek satira kirpiliyor. */
.kirp {
    max-width: 260px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* Ay kiyasi -- buyuk rakamin altinda, ayni kartta.
   Bu ay KOYU, gecen ay soluk: kiyas yonu bir bakista okunsun. */
.ay-kiyas {
    display: flex; flex-direction: column; gap: 1px;
    margin-top: var(--b2); padding-top: var(--b2);
    border-top: 1px solid var(--cizgi);
    font-family: var(--f-veri); font-variant-numeric: tabular-nums;
    font-size: 12px; color: var(--metin-2);
}
.ay-kiyas strong { color: var(--murekkep); font-weight: 600; }

/* Tamamlananlar katlanmis duruyor: is gerektirmiyorlar, yalnizca kayit.
   Katlanan kart <details>, basligi <summary> -- panelde JS yok. */
details.kart.katlanir { padding: 0; }
details.kart.katlanir > summary {
    list-style: none; padding: var(--b3) var(--b4); font-size: inherit;
    display: flex; align-items: center; gap: var(--b2);
}
details.kart.katlanir > summary::-webkit-details-marker { display: none; }
details.kart.katlanir > summary h2::before {
    content: "▸"; display: inline-block; margin-right: var(--b2);
    color: var(--sessiz); transition: transform .16s ease;
}
details.kart.katlanir[open] > summary h2::before { transform: rotate(90deg); }
details.kart.katlanir[open] > summary { border-bottom: 1px solid var(--cizgi); }

/* Formulun kendisi tablonun DIBINDE: ust bilgi kalabaligi yerine
   sayilarin hemen altinda, bakan kisi rakami gorunce okuyabilsin. */
.kart-ic.dipnot {
    border-top: 1px solid var(--cizgi);
    padding-top: var(--b3); padding-bottom: var(--b3);
}
.kart-ic.dipnot p { margin: 0; }

/* ==========================================================================
   MOBIL -- kenar cubugu ustte acilir menuye doner
   ========================================================================== */

@media (max-width: 860px) {
    .govde { display: block; }

    .kenar {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
        flex-direction: row; flex-wrap: wrap; align-items: center;
    }
    body.dar .kenar { width: 100%; }

    .kenar .marka { border-bottom: none; padding: var(--b3) var(--b4); }

    .mobil-ac {
        display: flex; align-items: center; justify-content: center;
        margin-left: auto; margin-right: var(--b3);
        width: 34px; height: 34px;
        background: none; border: 1px solid var(--cam-cizgi);
        border-radius: var(--r-kontrol);
        color: var(--cam-metin); cursor: pointer;
    }
    .mobil-ac svg { width: 17px; height: 17px; }

    .kenar nav, .kenar .dip { display: none; width: 100%; }
    body.menu-acik .kenar nav,
    body.menu-acik .kenar .dip { display: block; }
    body.menu-acik .kenar nav { border-top: 1px solid var(--cam-cizgi); }

    /* Mobilde daraltma anlamsiz -- yer zaten yatay */
    .kenar .daralt { display: none; }
    body.dar .kenar .etiket,
    body.dar .kenar .marka span:not(.im),
    body.dar .kenar .dip .metin { display: initial; }
    body.dar .kenar nav a { justify-content: flex-start; border-left-width: 3px; }

    .icerik { padding: var(--b4); }
    .ayar { grid-template-columns: 1fr; gap: var(--b2); }
    .ayar .deger { text-align: left; }
    .cipa { font-size: 24px; }
}

/* ---------------------------------------------------- aday listesi */
/* AILE = TEK SATIR, uyeler katlanabilir ve varsayilan KAPALI.
   Olculdu: 43 satirlik bir tarama tablosunun cogu bos no_offer satiriydi
   ve okunmuyordu. Karar aile duzeyinde veriliyor -- ana listede de aile
   duzeyi duruyor, ASIN duzeyi ayrintiya indi.

   Tablo degil grid: <details> bir tablo satirini kapsayamiyor ve bu
   panelde JS yok, katlanma native <details> ile yapiliyor. */
.aday-liste { display: flex; flex-direction: column; }

.aday-basliklar,
.aday-satir > details > summary {
    display: grid;
    grid-template-columns: 1fr 92px 148px 62px 96px;
    gap: var(--b3);
    align-items: center;
}
.aday-basliklar {
    grid-template-columns: 28px 1fr 92px 148px 62px 96px;
    padding: var(--b2) var(--b4);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sessiz);
    border-bottom: 1px solid var(--cizgi);
}

.aday-satir {
    display: grid;
    grid-template-columns: 28px 1fr;
    /* Baslik satirinin ilk bosluguyla AYNI: olmazsa sutunlar bir bosluk
       kayiyor ve sayilar baslikalarinin altina denk gelmiyor. */
    gap: var(--b3);
    align-items: start;
    border-bottom: 1px solid var(--cizgi);
    padding-left: var(--b4);
}
.aday-satir:hover { background: var(--yesil-sis); }
/* Uyarili satir SOLDURULMUYOR: esik yukseldiginde butun liste uyarili
   olabiliyor (canli taramada 15 satirin 15'i) ve gri bir liste bilgi
   tasimaz. Uyariyi rozet ve amber carpan soyluyor. */
.aday-satir .sec { padding-top: 11px; }
.aday-satir .sec input { width: auto; }
.aday-basliklar input[type=checkbox] { width: auto; margin: 0; }

/* SECIM CUBUGU -- yalnizca secim varken gorunur (JS `hidden` kaldirir).
   YAPISKAN: uzun listede secimi yapip yukari kaydirmak gerekmesin;
   kac aday secildigi ve kuyruga atma dugmesi hep elin altinda. */
.secim-cubugu {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: var(--b3);
    margin-bottom: var(--b3);
    padding: var(--b3) var(--b4);
    background: var(--yesil-sis);
    border: 1px solid var(--yesil-acik);
    border-radius: var(--r-kart);
}
.secim-cubugu[hidden] { display: none; }
.secim-cubugu .sayi {
    font-family: var(--f-veri); font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--yesil-koyu);
}
.secim-cubugu .dugmeler { margin-left: auto; display: flex; gap: var(--b2); }
.aday-satir > details { min-width: 0; }

.aday-satir summary {
    padding: 9px var(--b4) 9px 0;
    cursor: pointer;
    list-style: none;
}
.aday-satir summary::-webkit-details-marker { display: none; }
/* Katlanma isareti: acikken doner. Metnin akisini bozmasin diye
   ::before, ayri bir oge degil. */
.aday-satir summary .ad::before {
    content: "▸";
    color: var(--sessiz);
    margin-right: 6px;
    display: inline-block;
}
.aday-satir[open] summary,
.aday-satir > details[open] > summary { background: transparent; }
.aday-satir > details[open] > summary .ad::before { transform: rotate(90deg); }

.aday-satir .ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aday-satir .etiketler { margin-left: var(--b2); }
.aday-satir .etiketler > * { margin-right: 4px; }

/* Ayrinti: ana listede yer kaplamamasi gereken her sey burada --
   no_offer uyeler, kategori yolu, "aramada cikmadi" notu. */
.aday-ayrinti {
    background: var(--kagit);
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    margin: 0 var(--b4) var(--b3) 0;
}
.aday-ayrinti table { font-size: 12.5px; }
.aday-ayrinti th, .aday-ayrinti td { padding: 6px var(--b3); }
/* Satin alinamayan uye: SILINMIYOR, soluyor. Sync stok gelince
   yeniden bakiyor. */
.aday-ayrinti tr.sonuk td { opacity: .55; }

.varyasyon {
    font-family: var(--f-veri);
    font-size: 11px;
    color: var(--yesil-koyu);
    background: var(--yesil-sis);
    border: 1px solid var(--yesil-acik);
    border-radius: 4px;
    padding: 0 5px;
    display: inline-block;
    margin-top: 2px;
}
/* Atlanan urun: hata degil. Ailesinden bir uye zaten listelenmis. */
.rozet.skipped { background: var(--bilgi-zemin); color: var(--bilgi); }


/* ------------------------------------------------------- kaynak rozeti */
/* Iki tedarikci var (Amazon, CJ) ve siparis geldiginde HANGISINDEN
   alacagimizi bilmeden karsilanamaz. SKU'da da onek var (CJ-<vid>) ama
   listede tek bakista gorunmeli. */
.rozet.kaynak { font-weight: 600; letter-spacing: .02em; }
.rozet.kaynak.amazon { background: var(--yesil-sis); color: var(--yesil-koyu); }
.rozet.kaynak.cj     { background: var(--bilgi-zemin); color: var(--bilgi); }

/* --------------------------------------------------- kaynak secici */
.kaynak-secici { display: flex; gap: var(--b3); margin-bottom: var(--b3); }
.kaynak-secici label {
    flex: 1;
    display: flex; align-items: baseline; gap: var(--b2);
    padding: var(--b3);
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    cursor: pointer;
}
.kaynak-secici label.secili { border-color: var(--yesil); background: var(--yesil-sis); }
.kaynak-secici input { width: auto; margin: 0; }

/* ==========================================================================
   STUDIO KANALI
   Ayri sekme. Buradaki hicbir kural mevcut ekranlari etkilemiyor --
   sinif adlari studio'ya ozel ya da yeni.
   ========================================================================== */

/* Orijinal Amazon kareleri. Vision BUNLARI okuyor; ilana yuklenecek AI
   sahneleri ayri ve henuz uretilmemis olabilir. */
.galeri {
    display: grid; gap: var(--b2);
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.galeri img {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    background: var(--kagit); border: 1px solid var(--cizgi);
    border-radius: var(--r-kontrol);
}

/* Dogrulayici uyarilari -- UYARI, red degil. */
ul.liste { margin: 0; padding-left: 0; list-style: none; }
ul.liste li {
    padding: 6px 0; border-bottom: 1px solid var(--cizgi);
    font-size: 13px;
}
ul.liste li:last-child { border-bottom: none; }

/* Baglanti gorunumlu dugme (tabloda "Incele"). */
a.dugme {
    display: inline-block; text-decoration: none;
    padding: 5px 10px; border-radius: var(--r-kontrol);
    border: 1px solid var(--cizgi); color: var(--murekkep);
}
a.dugme.birincil {
    background: var(--yesil); border-color: var(--yesil); color: #fff;
}
a.dugme:hover { border-color: var(--yesil); }