/* Tuval Stüdyo — Satışlar paneli (siparişler ve net kâr)
   Yalnız bu ekrana ait; style.css'in değişkenlerini kullanır, yeni renk token'larını burada tanımlar.
   Grafik renkleri dataviz doğrulayıcısından geçti (28 Eyl 2026): koyu yüzey #0f1216, aydınlık #fff.
   Gri bilerek renksiz: kesintiler "bağlam", altın ve yeşil "vurgu" (emphasis biçimi). */

.st-alan{position:absolute;inset:0;z-index:9;background:var(--bg-1);overflow:hidden;display:flex;flex-direction:column;
  --st-altin:#b8853a; --st-gri:#66707f; --st-yesil:#3f9e5a; --st-mavi:#3987e5;
  --st-izgara:rgba(255,255,255,.06);
  --st-kart:var(--bg);
  --ease-out-guclu:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1)}
:root[data-tema="acik"] .st-alan{--st-altin:#a9761f; --st-gri:#8b94a2; --st-yesil:#15803d; --st-mavi:#2a78d6;
  --st-izgara:rgba(16,20,28,.08); --st-kart:#fff; background:var(--bg)}

.st-kaydir{flex:1;overflow:auto;container-type:inline-size;container-name:st}
.st{max-width:1320px;margin:0 auto;padding:18px 22px 40px;display:grid;gap:14px}

/* ------------------------------------------------------------ üst çubuk */
.st-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.st-baslik{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
.st-baslik h2{margin:0;font-size:19px;letter-spacing:-.02em}
.st-tazelik{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-3);white-space:nowrap}
.st-tazelik i{width:7px;height:7px;border-radius:50%;background:var(--st-yesil);position:relative}
.st-tazelik i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:st-nabiz 2.4s var(--ease-out-guclu) infinite}
@keyframes st-nabiz{from{transform:scale(1);opacity:.55}to{transform:scale(2.8);opacity:0}}
.st-bar-sag{display:flex;gap:6px}
.st-donem{display:flex;gap:2px;padding:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:10px}
.st-donem button{height:28px;padding:0 11px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--tx-2);
  transition:background-color .15s ease,color .15s ease}
.st-donem button.on{background:var(--bg-3);color:var(--tx);box-shadow:0 1px 0 var(--line-2) inset}
.st-bar .btn svg.donuyor{animation:st-don .9s linear infinite}
@keyframes st-don{to{transform:rotate(360deg)}}

.st-not{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r);font-size:12.5px;
  background:var(--gold-dim);border:1px solid var(--gold-brd);color:var(--tx)}
.st-not svg{flex:0 0 auto;width:17px;height:17px;color:var(--gold);margin-top:1px}
.st-not b{color:var(--gold)}
.st-not button{margin-left:auto;flex:0 0 auto}
.st-not.hata{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35)}
.st-not.hata svg{color:var(--red)}
/* varsayımlar notu: uyarı değil bilgi, altın yerine nötr */
.st-not.sade{background:var(--bg-2);border-color:var(--line)}
.st-not.sade svg{color:var(--tx-3)}
.st-not.sade b{color:var(--tx)}

/* ------------------------------------------------------------ kartlar */
.st-kart{background:var(--st-kart);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;min-width:0}
.st-kart-bas{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.st-kart-bas h3{margin:0;font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.st-kart-bas .hint{margin-left:auto;font-size:11.5px;color:var(--tx-3)}
.st-kart-bas .st-donem{margin-left:auto}
.st-kart-bas .st-donem button{height:24px;padding:0 9px;font-size:11.5px}

.st-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.st-hero{grid-column:1/-1}
/* .btn-mini style.css'te .btn-primary'den sonra geldiği için altını eziyor; bu ekranda geri ver */
.st-alan .btn-primary.btn-mini{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--uzeri);border-color:transparent}
.st-alan a.btn{text-decoration:none}
.st-kpi-ad{font-size:12px;color:var(--tx-2);font-weight:500;display:flex;align-items:center;gap:6px}
.st-kpi-deger{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:6px;white-space:nowrap}
.st-hero .st-kpi-deger{font-size:44px;letter-spacing:-.035em;color:var(--kar)}
.st-hero .st-kpi-deger.eksi{color:var(--red)}
.st-kpi-alt{margin-top:6px;font-size:12px;color:var(--tx-3);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.st-kpi-alt b{color:var(--tx-2);font-weight:600}
.st-donem-ad{color:var(--gold);font-weight:650}
.st-tumu-link{font-size:11.5px;font-weight:650;color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.st-hero-ic{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.st-delta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:999px;
  background:var(--bg-2);color:var(--tx-2);border:1px solid var(--line)}
.st-delta svg{width:12px;height:12px;stroke-width:2.2}
.st-delta.iyi{color:var(--kar)}
.st-delta.kotu{color:var(--red)}
.st-kesinlik{min-width:220px;flex:0 1 300px}
.st-kesinlik-ust{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx-3);margin-bottom:6px}
.st-kesinlik-ust b{color:var(--tx-2)}
.st-kesinlik-alt{margin-top:6px;font-size:11px;color:var(--tx-3)}
.st-kpi-alt b.eksi{color:var(--red)}
.st-metre{height:6px;border-radius:99px;background:var(--gold-dim);overflow:hidden}
.st-metre i{display:block;height:100%;border-radius:99px;background:var(--st-altin);transform-origin:left;
  transition:transform .6s var(--ease-out-guclu)}

.st-izgara{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.st-kpi .st-kart{display:flex;flex-direction:column}
.st-kivilcim{display:block;width:100%;height:34px;margin-top:auto;padding-top:12px;overflow:visible}
.st-kivilcim .cizgi{fill:none;stroke:var(--renk);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
/* Çizgi soldan sağa açılır. ⚠️ stroke-dasharray + pathLength burada KULLANILMAZ: non-scaling-stroke
   ile kesik uzunluğu ekran pikseline göre hesaplanıyor ve çizgi yarıda kesiliyordu. */
.st-kivilcim{animation:st-sil .8s var(--ease-out-guclu) .15s backwards}
@keyframes st-sil{from{clip-path:inset(0 100% 0 0)}}


/* ------------------------------------------------------ günlük sütunlar */
.st-grafik{position:relative;height:210px;margin:0 0 0 38px}
.st-grafik-ic{position:absolute;inset:0 0 22px 0}
.st-cizgi{position:absolute;left:0;right:0;height:1px;background:var(--st-izgara)}
.st-cizgi.taban{background:var(--line-2)}
.st-cizgi span{position:absolute;right:calc(100% + 8px);top:-7px;font-size:10.5px;color:var(--tx-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.st-sutunlar{position:absolute;inset:0;display:flex}
.st-sutun{flex:1;position:relative;display:flex;justify-content:center;outline:none;cursor:default;min-width:0}
.st-sutun i{position:absolute;top:0;bottom:0;width:var(--gen,14px);background:var(--st-renk,var(--st-yesil));
  clip-path:var(--klip);transition:clip-path .42s var(--ease-inout),filter .15s ease;transition-delay:var(--gecikme,0ms)}
.st-sutun:hover i,.st-sutun:focus-visible i{filter:brightness(1.25)}
.st-sutun.bugun i{box-shadow:none}
.st-eksen{position:absolute;left:0;right:0;bottom:0;height:18px}
.st-eksen span{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--tx-3);white-space:nowrap}
.st-grafik-bos{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx-3);font-size:12.5px}

.st-ipucu{position:fixed;z-index:60;pointer-events:none;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;box-shadow:var(--sh);font-size:12px;min-width:150px;
  opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s var(--ease-out-guclu)}
.st-ipucu.on{opacity:1;transform:none}
.st-ipucu-t{color:var(--tx-3);font-size:11px;margin-bottom:4px}
.st-ipucu-s{display:flex;align-items:center;gap:8px;justify-content:space-between;line-height:1.7}
.st-ipucu-s span{color:var(--tx-2);display:flex;align-items:center;gap:6px}
.st-ipucu-s span::before{content:"";width:10px;height:2px;border-radius:2px;background:var(--anahtar,transparent)}
.st-ipucu-s b{font-variant-numeric:tabular-nums}

/* ------------------------------------------------ para nereye gidiyor */
.st-akis{display:grid;gap:9px}
.st-akis-s{display:grid;grid-template-columns:128px minmax(0,1fr) 84px;gap:12px;align-items:center;font-size:12.5px}
.st-akis-ad{color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-akis-ad small{display:block;font-size:10.5px;color:var(--tx-3)}
.st-akis-yol{position:relative;height:18px}
.st-akis-yol i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--st-gri);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out-guclu);transition-delay:var(--gecikme,0ms)}
.st-akis-s.toplam .st-akis-yol i{background:var(--st-altin);transform-origin:left}
.st-akis-s.net .st-akis-yol i{background:var(--st-yesil);transform-origin:left}
.st-akis-s.net.eksi .st-akis-yol i{background:var(--red)}
.st-akis.ciz .st-akis-yol i{transform:scaleX(1)}
.st-akis-t{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.st-akis-s.net .st-akis-t{color:var(--kar)}
.st-akis-s.net.eksi .st-akis-t{color:var(--red)}
.st-akis-ayrac{height:1px;background:var(--line);margin:2px 0}

/* ------------------------------------------------ tasarımlar ve boyutlar */
.st-tasarimlar{display:grid;gap:4px}
.st-tasarim{display:grid;grid-template-columns:22px 44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:6px 6px;border-radius:10px;transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){ .st-tasarim:hover{background:var(--bg-2)} }
.st-sira{font-size:11.5px;font-weight:700;color:var(--tx-3);text-align:center;font-variant-numeric:tabular-nums}
.st-tasarim:first-child .st-sira{color:var(--gold)}
.st-gorsel{width:44px;height:44px;border-radius:9px;object-fit:cover;background:var(--bg-3);display:block}
.st-gorsel-bos{display:grid;place-items:center;color:var(--tx-3)}
.st-gorsel-bos svg{width:18px;height:18px}
.st-tasarim-ad{font-size:12.5px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-tasarim-alt{font-size:11.5px;color:var(--tx-3);margin-top:2px}
.st-tasarim-sag{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:650;color:var(--kar);white-space:nowrap}
.st-tasarim-sag small{display:block;font-weight:500;color:var(--tx-3);font-size:11px}

.st-boyutlar{display:grid;gap:10px}
.st-boyut{display:grid;grid-template-columns:86px minmax(0,1fr) 92px;gap:12px;align-items:center;font-size:12.5px}
.st-boyut-ad{color:var(--tx-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.st-boyut-yol{height:14px;position:relative}
.st-boyut-yol i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:0 4px 4px 0;background:var(--st-altin);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out-guclu);transition-delay:var(--gecikme,0ms)}
.st-boyutlar.ciz .st-boyut-yol i{transform:scaleX(1)}
.st-boyut-t{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.st-boyut-t small{color:var(--tx-3);margin-left:4px}

/* ------------------------------------------------------ sipariş listesi */
.st-liste-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.st-liste-bar h3{margin:0 auto 0 0;font-size:13.5px}
.st-cipler{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.st-cipler::-webkit-scrollbar{display:none}
.st-cip{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--tx-2);
  font-size:12px;font-weight:600;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.st-cip b{color:var(--tx-3);margin-left:4px;font-weight:600}
.st-cip.on{background:var(--gold-dim);border-color:var(--gold-brd);color:var(--gold)}
.st-cip.on b{color:var(--gold)}
.st-ara{height:30px;width:200px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);
  font-size:12.5px;outline:none;transition:border-color .15s ease}
.st-ara:focus{border-color:var(--gold-brd)}

.st-tablo-bas,.st-sat-ust{display:grid;align-items:center;gap:12px;
  grid-template-columns:44px minmax(0,1fr) 112px 92px 84px 84px 92px 22px}
.st-tablo-bas{padding:0 10px 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3);
  border-bottom:1px solid var(--line)}
.st-tablo-bas span:nth-child(n+4){text-align:right}
.st-sat{border-bottom:1px solid var(--line)}
/* Giriş yalnız liste yeniden kurulurken (dönem/süzgeç); aramada yazarken oynamaz.
   backwards: bekleme süresince başlangıç hâli uygulanır, bitince eleman doğal hâline döner. */
.st-liste.anim .st-sat{animation:st-gir .32s var(--ease-out-guclu) backwards;animation-delay:var(--gecikme,0ms)}
@keyframes st-gir{from{opacity:0;transform:translateY(6px)}}
.st-sat-ust{padding:9px 10px;cursor:pointer;border-radius:10px;transition:background-color .15s ease}
@media (hover:hover) and (pointer:fine){ .st-sat-ust:hover{background:var(--bg-2)} }
.st-sat.acik .st-sat-ust{background:var(--bg-2);border-radius:10px 10px 0 0}
.st-sat.iptal .st-sat-ust{opacity:.5}
.st-sat-ad{min-width:0}
.st-sat-ad b{display:block;font-size:12.8px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sat-ad span{display:block;font-size:11.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
.st-yeni{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 6px;border-radius:999px;background:var(--gold);color:var(--uzeri);margin-right:6px;vertical-align:1px}
.st-sat.yeni .st-sat-ust{animation:st-parilti 2.2s var(--ease-out-guclu) .4s 1}
@keyframes st-parilti{0%{box-shadow:inset 0 0 0 1px var(--gold-brd);background:var(--gold-dim)}100%{box-shadow:inset 0 0 0 1px transparent}}
.st-n{text-align:right;font-variant-numeric:tabular-nums;font-size:12.8px;white-space:nowrap}
.st-n small{display:block;font-size:10.5px;color:var(--tx-3)}
.st-n s{color:var(--tx-3);font-size:10.5px;display:block}
.st-n.net{font-weight:700;color:var(--kar)}
.st-n.net.eksi{color:var(--red)}
.st-n.soluk{color:var(--tx-2)}
.st-kaynak{display:grid;place-items:center;color:var(--tx-3)}
.st-kaynak svg{width:15px;height:15px}
.st-kaynak.kesin{color:var(--kar)}
/* Etsy rakamı girildi ama Offsite "Bilmiyorum": tik var ama yeşil değil (net tam kesin değil) */
.st-kaynak.kismi{color:var(--gold)}
.st-kaynak.disi{color:var(--tx-3)}
/* Etsy dışı sipariş (yeniden basım/numune): satış değil, yalnız maliyet */
.st-disi-rozet{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;line-height:17px;padding:0 7px;
  border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--tx-2);vertical-align:1px;
  text-transform:none;letter-spacing:0}
.st-disi-aciklama{display:grid;gap:8px;font-size:12.5px;line-height:1.5;color:var(--tx-2)}
.st-disi-aciklama p{margin:0}
.st-disi-aciklama b{color:var(--tx);font-weight:600}

.st-durum{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 7px;border-radius:999px;font-size:11px;
  font-weight:650;white-space:nowrap;background:var(--bg-2);border:1px solid var(--line);color:var(--tx-2)}
.st-durum svg{width:12px;height:12px;stroke-width:2.1}
.st-durum.uretim svg{color:var(--blue)}
.st-durum.yolda svg{color:var(--gold)}
.st-durum.teslim{color:var(--kar)}
.st-durum.iptal,.st-durum.sorun{color:var(--red)}

/* açılan ayrıntı: 0fr → 1fr (akordeon; yükseklik ancak böyle akar) */
.st-ayrinti{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease-out-guclu)}
.st-sat.acik .st-ayrinti{grid-template-rows:1fr}
.st-ayrinti>div{overflow:hidden;min-height:0}
.st-ayrinti-ic{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 12px 16px;background:var(--bg-2);
  border-radius:0 0 12px 12px;margin-bottom:8px}
.st-bolum{min-width:0}
.st-bolum h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3)}
.st-dokum{display:grid;gap:3px;font-size:12.5px}
.st-dokum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.st-dokum span{color:var(--tx-2)}
.st-dokum b{font-variant-numeric:tabular-nums;font-weight:600}
.st-dokum .eksi b{color:var(--tx-2);font-weight:500}
.st-dokum .gelir b{color:var(--tx)}
.st-dokum .son{border-top:1px solid var(--line-2);margin-top:4px;padding-top:7px}
.st-dokum .son b{color:var(--kar);font-weight:700}
.st-dokum .son.eksi b{color:var(--red)}
/* tutarsız açıklama satırı: ilana özel oran ("Dalmatian Print: indirim dışı") */
.st-dokum .bilgi{padding:0 0 3px 12px}
.st-dokum .bilgi span{font-size:11.5px;color:var(--tx-3)}
.st-kalemler{display:grid;gap:8px;margin-bottom:12px}
.st-kalem{display:flex;gap:10px;align-items:center;font-size:12.5px}
.st-kalem .st-gorsel{width:36px;height:36px}
.st-kalem span{color:var(--tx-3);font-size:11.5px;display:block}
.st-baglantilar{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.st-baglantilar a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;font-size:12px;
  font-weight:600;color:var(--tx-2);background:var(--bg-3);text-decoration:none;transition:color .15s ease}
.st-baglantilar a:hover{color:var(--tx)}
.st-baglantilar svg{width:14px;height:14px}
.st-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.st-form label{display:grid;gap:4px;font-size:11.5px;color:var(--tx-2);min-width:0;align-content:start}
.st-form input{height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line-2);background:var(--bg-1);
  font-size:13px;outline:none;font-variant-numeric:tabular-nums;transition:border-color .15s ease}
.st-form input:focus{border-color:var(--gold-brd)}
.st-form .tam{grid-column:1/-1}
/* kupon: tek kutu + sağında $ / % seçici */
.st-birlesik{display:flex;border:1px solid var(--line-2);border-radius:9px;background:var(--bg-1);
  transition:border-color .15s ease}
.st-birlesik:focus-within{border-color:var(--gold-brd)}
.st-birlesik input{flex:1;width:0;min-width:0;height:32px;border:0;background:transparent}
.st-birim{display:flex;gap:2px;padding:3px}
.st-birim button{width:30px;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--tx-3);
  transition:background-color .15s ease,color .15s ease}
.st-birim button.on{background:var(--gold-dim);color:var(--gold)}
.st-alt-not{min-height:15px;font-size:11px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.st-onizleme-rozet{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;
  background:var(--gold-dim);color:var(--gold);font-size:10px;letter-spacing:.02em;text-transform:none;font-weight:700}
/* değişen rakam bir kez parlar: yazdıkça neyin değiştiği görülsün */
.st-degisti{animation:st-degisti .7s var(--ease-out-guclu)}
@keyframes st-degisti{from{background:var(--gold-dim);box-shadow:0 0 0 4px var(--gold-dim)}}
.st-dokum .son.st-degisti{border-radius:6px}
/* kaydedilmemiş değişiklik varken Kaydet bir kez nabız atar, sonra altın halkayla bekler */
.st-alan .btn-primary.btn-mini.bekliyor{box-shadow:0 0 0 3px var(--gold-dim);animation:st-bekle .9s var(--ease-out-guclu)}
@keyframes st-bekle{from{box-shadow:0 0 0 0 var(--gold-brd)}to{box-shadow:0 0 0 3px var(--gold-dim)}}
.st-uclu{display:flex;gap:2px;padding:3px;background:var(--bg-1);border:1px solid var(--line-2);border-radius:9px}
.st-uclu button{flex:1;height:26px;border-radius:6px;font-size:12px;font-weight:600;color:var(--tx-2);
  transition:background-color .15s ease,color .15s ease}
.st-uclu button.on{background:var(--gold-dim);color:var(--gold)}
.st-form-alt{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.st-form-alt .hint{font-size:11.5px;color:var(--tx-3);margin-right:auto}
.st-kesin-rozet{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:var(--kar);
  text-transform:none;letter-spacing:0}
.st-kesin-rozet svg{width:13px;height:13px}
.st-kesin-rozet.kismi{color:var(--gold)}
.st-alt-not.hata{color:var(--red)}
/* Etsy rakamı kaydedilince: "Bu ilan bu dönemde %0 mı?" önerisi (yalnız düğmeyle yazar) */
.st-oneri{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-radius:10px;
  background:var(--gold-dim);border:1px solid var(--gold-brd);font-size:12px;color:var(--tx-2)}
.st-oneri>svg{flex:0 0 auto;width:16px;height:16px;color:var(--gold);margin-top:1px}
.st-oneri-metin{flex:1 1 220px;display:grid;gap:3px;min-width:0}
.st-oneri-metin b{color:var(--tx);font-weight:650}
.st-oneri-dugme{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
[data-oneri-ust] .st-oneri{margin:10px 0 0}

.st-bos{padding:36px 10px;text-align:center;color:var(--tx-3);font-size:12.5px}
.st-bos svg{width:30px;height:30px;color:var(--gold);margin-bottom:8px}
.st-bos h3{margin:0 0 4px;color:var(--tx);font-size:14.5px}
.st-daha{display:flex;justify-content:center;padding-top:12px}

/* ilk yükleme: iskelet. Yenilemede çerçeve korunur, yalnız soluklaşır (zıplama yok) */
.st-iskelet{border-radius:var(--r-l);background:linear-gradient(90deg,var(--bg-2) 0%,var(--bg-3) 50%,var(--bg-2) 100%);
  background-size:200% 100%;animation:st-parla 1.3s linear infinite}
@keyframes st-parla{from{background-position:100% 0}to{background-position:-100% 0}}
.st.yenileniyor .st-veri{opacity:.55;transition:opacity .2s ease}
.st-veri{transition:opacity .2s ease}

/* kartların girişi: yalnız panel ilk açılırken, 50 ms arayla */
.st.giris .st-kademe{animation:st-gir .4s var(--ease-out-guclu) backwards;animation-delay:calc(var(--i,0) * 55ms)}

/* ------------------------------------------------------ sol panel özeti */
.st-panel-bugun{padding:14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line)}
.st-panel-bugun .st-kpi-ad{font-size:11.5px}
.st-panel-bugun .st-kpi-deger{font-size:24px}
.st-panel-bugun .st-kpi-deger small{font-size:13px;color:var(--tx-3);font-weight:500;margin-left:4px}
.st-panel-adim{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:adim}
.st-panel-adim li{display:grid;grid-template-columns:20px 1fr;gap:8px;font-size:12px;color:var(--tx-2);counter-increment:adim}
.st-panel-adim li::before{content:counter(adim);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-dim);color:var(--gold);font-size:10.5px;font-weight:700}

/* kupon dönemleri penceresi */
.st-kupon-liste{display:grid;gap:8px}
.st-kupon{display:grid;grid-template-columns:minmax(0,1.3fr) 118px 128px 128px 32px;gap:8px;align-items:end}
.st-kupon-deger{display:flex;gap:4px;min-width:0}
/* width:0 → kutu sütuna sığar; yoksa girişin doğal genişliği % / $ seçicisini tarih kutusunun altına itiyordu */
.st-kupon-deger input{flex:1;width:0}
.st-kupon select{height:32px;padding:0 4px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);font-size:12.5px;color:var(--tx)}
.st-kupon label{display:grid;gap:4px;font-size:11px;color:var(--tx-3);min-width:0}
.st-kupon input{height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);font-size:12.5px;outline:none;min-width:0}
.st-kupon input:focus{border-color:var(--gold-brd)}
/* dönemin ilana özel oranları (Etsy indirimi ilan ilan seçiliyor) */
.st-kupon-kutu{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.st-kupon-kutu:last-child{border-bottom:0;padding-bottom:0}
.st-ilan-bas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:26px}
.st-ilan-ac{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:7px;font-size:11.5px;
  font-weight:650;color:var(--tx-2);background:var(--bg-2);border:1px solid var(--line);transition:color .15s ease,border-color .15s ease}
.st-ilan-ac svg{width:13px;height:13px}
.st-ilan-ac[aria-expanded="true"]{color:var(--gold);border-color:var(--gold-brd)}
@media (hover:hover) and (pointer:fine){ .st-ilan-ac:hover{color:var(--tx)} }
.st-ilan-ozet{font-size:11.5px;color:var(--gold);font-weight:600}
.st-ilan-bolum{display:grid;gap:8px;padding:10px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line)}
.st-ilan-bolum[hidden]{display:none}
.st-ilan-liste{display:grid;gap:4px}
.st-ilan-sat{display:grid;grid-template-columns:minmax(0,1fr) 82px 88px 30px;gap:8px;align-items:center;font-size:12.5px}
.st-ilan-ad{min-width:0}
.st-ilan-ad b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ilan-ad small{display:block;font-size:10.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.st-ilan-oran{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--tx-3)}
.st-ilan-durum{font-size:11px;color:var(--tx-3)}
.st-ilan-bolum input{height:30px;padding:0 9px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-1);font-size:12.5px;
  outline:none;min-width:0;width:100%;font-variant-numeric:tabular-nums}
.st-ilan-bolum input:focus{border-color:var(--gold-brd)}
.st-ilan-ekle{display:grid;grid-template-columns:minmax(0,1fr) 82px auto;gap:8px;align-items:end}
.st-ilan-ekle label{display:grid;gap:4px;font-size:11px;color:var(--tx-3)}
.st-ilan-oneriler{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px}
.st-ilan-oneriler[hidden]{display:none}
.st-ilan-oneriler button{display:grid;gap:1px;text-align:left;padding:6px 9px;border-radius:8px;background:var(--bg-1);
  border:1px solid var(--line);font-size:12px;color:var(--tx);min-width:0;transition:border-color .15s ease}
.st-ilan-oneriler button b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ilan-oneriler button small{font-size:10.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){ .st-ilan-oneriler button:hover{border-color:var(--gold-brd)} }
.st-ilan-not{margin:0;font-size:11.5px}
@media (max-width:640px){
  /* pencere .st kabının dışında: oradaki @container kuralı buraya işlemiyordu, dar ekranda satır taşıyordu */
  .st-kupon{grid-template-columns:1fr 1fr}
  .st-kupon label:first-child{grid-column:1/-1}
  .st-ilan-sat{grid-template-columns:minmax(0,1fr) 76px 30px}
  .st-ilan-durum{display:none}
  .st-ilan-ekle{grid-template-columns:minmax(0,1fr) 76px}
  .st-ilan-ekle .btn{grid-column:1/-1;justify-self:start}
}

/* ------------------------------------------------------ geniş ekran */
@container st (min-width:760px){
  .st-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st-ayrinti-ic{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@container st (min-width:1020px){
  .st-izgara{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  /* geniş ekranda tek sıra: büyük net kâr kartı + üç küçük kart */
  .st-kpi{grid-template-columns:minmax(0,1.75fr) repeat(3,minmax(0,1fr))}
  .st-hero{grid-column:auto}
  .st-hero-ic{flex-direction:column;align-items:stretch;gap:14px}
  .st-kesinlik{flex:none;min-width:0}
}
@container st (max-width:759px){
  .st{padding:14px 12px 90px}
  /* başlık + düğmeler üst satırda, dönem seçici tam genişlik alt satırda */
  .st-bar{gap:10px}
  .st-bar-sag .btn span{display:none}
  .st-bar-sag .btn{padding:0 9px}
  .st-bar>.st-donem{order:3;width:100%}
  .st-bar>.st-donem button{flex:1;padding:0 4px}
  .st-not{flex-wrap:wrap}
  .st-not>div{flex:1 1 calc(100% - 30px)}
  .st-not button{margin-left:27px}
  .st-kpi .st-kart:last-child{grid-column:1/-1}
  .st-hero .st-kpi-deger{font-size:36px}
  .st-kpi-deger{font-size:21px}
  .st-tablo-bas{display:none}
  .st-sat-ust{grid-template-columns:44px minmax(0,1fr) auto;row-gap:6px}
  .st-sat-ust>.st-mob-gizle{display:none}
  .st-ara{width:100%}
  .st-akis-s{grid-template-columns:112px minmax(0,1fr) 76px;gap:8px}
  .st-akis-ad{white-space:normal;line-height:1.3}
  .st-liste-bar h3{margin-right:auto}
  .st-liste-bar .st-ara{order:3}
  .st-liste-bar .btn span{display:none}
  .st-kupon{grid-template-columns:1fr 1fr}
  .st-kupon label:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .rail{overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-btn{flex:0 0 auto}
}

/* hareket azaltma: yer değiştiren her şey durur, yalnız saydamlık kalır */
@media (prefers-reduced-motion:reduce){
  .st.giris .st-kademe,.st-liste.anim .st-sat{animation:st-sade .2s ease backwards}
  @keyframes st-sade{from{opacity:0}}
  .st-akis-yol i,.st-boyut-yol i{transition:none;transform:none}
  .st-sutun i{transition:none}
  .st-tazelik i::after,.st-iskelet,.st-bar .btn svg.donuyor{animation:none}
  .st-sat.yeni .st-sat-ust{animation:none;background:var(--gold-dim)}
  .st-ayrinti{transition:none}
  .st-degisti,.st-alan .btn-primary.btn-mini.bekliyor{animation:none}
  .st-metre i{transition:none}
  .st-kivilcim{animation:none}
}

/* ------------------------------------------------ Stüdyo bağlantısı (raydaki düğmelerle aynı görünüm) */
.rail-git{width:58px;padding:9px 0 7px;border-radius:11px;display:grid;justify-items:center;gap:4px;color:var(--tx-3);
  text-decoration:none;transition:color .16s var(--ease),background-color .16s var(--ease)}
.rail-git span{font-size:10px;font-weight:600;letter-spacing:.01em}
.rail-git svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){ .rail-git:hover{color:var(--gold);background:var(--gold-dim)} }
@media (max-width:900px){ .rail-git{width:auto;padding:6px 12px;flex:0 0 auto} }
/* Printify'ın ücretsiz yeniden basımı (13 Eki 2026): maliyetsiz, rozet kâr rengiyle */
.st-disi-rozet.ucretsiz{color:var(--kar);border-color:var(--line-2)}
.st-basim-ucret{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx);cursor:pointer;
  padding:8px 10px;border-radius:10px;background:var(--bg-3);border:1px solid var(--line-2);width:max-content;max-width:100%}
.st-basim-ucret input{width:16px;height:16px;margin:0;accent-color:var(--st-altin);cursor:pointer;flex:none}
.st-basim-ucret input:disabled{cursor:progress}