/* Düzen: üstte yükleme tezgâhı + ayarlar, altında halı kartları ızgarası */
:root{
  --yun:#f6f3ee; --kart:#fffdf9; --cizgi:#e3ddd3; --yazi:#1f1d1a; --soluk:#625b52;  /* --kart üstünde 6,6:1, --yun üstünde 6,1:1 (önce #6d665c) */
  --kokboya:#a3352b; --kokboya-koyu:#842a22; --indigo:#2d3a6b; --iyi:#2f6b3f; --uyari:#8a5d0e;
  /* beyaz yazılı dolgular: koyu temada metin renkleri açık olduğu için ayrı (kontrast ≥ 4.5) */
  --btn:#a3352b; --btn-koyu:#842a22; --indigo-dolgu:#2d3a6b; --iyi-dolgu:#2f6b3f;
  --display:"Geist", "Inter", system-ui, sans-serif;
  --govde:"Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --dama1:#ece8e1; --dama2:#fbfaf7;
}
@media (prefers-color-scheme: dark){
  :root{ --yun:#171614; --kart:#201e1b; --cizgi:#36322c; --yazi:#efeae2; --soluk:#a39b8f;
    --kokboya:#e5675a; --kokboya-koyu:#e06a5d; --btn:#b53f33; --btn-koyu:#9e352b; --indigo-dolgu:#4a5aa8; --iyi-dolgu:#2f7a4a; --indigo:#8d9bd6; --iyi:#6fbf83; --uyari:#e0b05a;
    --dama1:#2a2824; --dama2:#34312c; color-scheme:dark }
}
*{box-sizing:border-box}
[hidden]{display:none!important}  /* display veren sınıflar (.sb-sonuc, .toplu-liste…) hidden'ı ezmesin */
body{margin:0;background:var(--yun);color:var(--yazi);font:16px/1.5 var(--govde)}
a{color:var(--indigo)}
.sar{max-width:1180px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-left)) 80px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font:800 30px/1 var(--display);letter-spacing:-.02em}
.logo b{color:var(--kokboya)}
.alt{color:var(--soluk);font-size:15px}
h1{font:600 clamp(28px,4.2vw,46px)/1.08 var(--display);letter-spacing:-.02em;margin:34px 0 10px;max-width:18ch;text-wrap:balance}
.giris{color:var(--soluk);max-width:60ch;margin:0 0 26px}
.tezgah{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media (max-width:820px){.tezgah{grid-template-columns:1fr}}
.birak{border:2px dashed var(--cizgi);border-radius:14px;background:var(--kart);min-height:230px;display:grid;place-items:center;text-align:center;padding:28px;cursor:pointer;transition:border-color .15s, background .15s}
.birak.ust{border-color:var(--kokboya);background:color-mix(in srgb,var(--kokboya) 6%,var(--kart))}
.birak strong{font:600 22px/1.2 var(--display);display:block;margin-bottom:6px}
.birak span{color:var(--soluk);font-size:14px}
/* tüm düğmeler aynı boy: dolgulu düğmede de 1 px (saydam) kenarlık; boy padding'den değil min-height'tan
   (masaüstündeki %80 zoom'da padding+kenarlık yuvarlaması 0,5 px fark açıyordu) → .btn 44, .btn.kucuk 36 px */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font:600 15px/20px var(--govde);border:1px solid transparent;border-radius:10px;padding:4px 18px;cursor:pointer;background:var(--btn);color:#fff}
.btn:hover{background:var(--btn-koyu)}
.btn:disabled{opacity:.45;cursor:default}
.btn.ikincil{background:transparent;color:var(--yazi);border:1px solid var(--cizgi)}
.btn:focus-visible,.birak:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.ayar{background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;padding:18px 20px;display:grid;gap:14px;align-content:start}
.ayar h2{font:600 13px var(--govde);letter-spacing:.08em;text-transform:uppercase;color:var(--soluk);margin:0;font-variant-numeric:tabular-nums}
.satir{display:flex;justify-content:space-between;align-items:center;gap:12px}
.satir label{font-weight:500}
.satir small{display:block;color:var(--soluk);font-size:13px;font-weight:400}
select,input[type=text]{font:15px/20px var(--govde);padding:8px 10px;border-radius:8px;border:1px solid var(--cizgi);background:var(--yun);color:var(--yazi)}
input[type=text]{width:110px;font-family:var(--govde);font-variant-numeric:tabular-nums}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--kokboya)}
.ust-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:34px 0 14px;flex-wrap:wrap}
.ust-bar h2{font:600 22px var(--display);margin:0}
.sayac{font:500 14px var(--govde);color:var(--soluk);font-variant-numeric:tabular-nums}
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.gorsel{position:relative;aspect-ratio:3/4;background:repeating-conic-gradient(var(--dama1) 0 25%,var(--dama2) 0 50%) 0 0/18px 18px;overflow:hidden;user-select:none;touch-action:none}
.gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gorsel .once{clip-path:inset(0 calc(100% - var(--k,50%)) 0 0)}
/* ayraç görselin tamamını kaplar; çizgi ve tutamak --k'ya göre konur, kenarda (0 % / 100 %) görselin içinde kalır (yarım görünmez) */
.gorsel .ayrac{position:absolute;inset:0;pointer-events:none}
.gorsel .ayrac::before{content:"";position:absolute;top:0;bottom:0;left:clamp(0px,calc(var(--k,50%) - 1px),calc(100% - 2px));width:2px;background:var(--kokboya)}
.gorsel .ayrac::after{content:"";box-sizing:border-box;position:absolute;top:50%;left:clamp(0px,calc(var(--k,50%) - 13px),calc(100% - 26px));width:26px;height:26px;border-radius:50%;background:var(--kokboya);border:3px solid #fff;transform:translateY(-50%)}
.etiket{position:absolute;top:8px;font:500 11px var(--govde);letter-spacing:.06em;background:rgba(0,0,0,.55);color:#fff;padding:3px 7px;border-radius:5px}
.etiket.sol{left:8px}.etiket.sag{right:8px}
.bekle{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--kart) 70%,transparent);font:500 14px var(--govde);color:var(--soluk);font-variant-numeric:tabular-nums}
.bekle i{display:block;width:34px;height:34px;border-radius:50%;border:3px solid var(--cizgi);border-top-color:var(--kokboya);animation:don 0.9s linear infinite;margin:0 auto 10px}
@keyframes don{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bekle i{animation:none}}
.alt-kart{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--cizgi)}
.ad{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad small{display:block;font:12px var(--govde);color:var(--soluk);white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}  /* .ad tek satır keser; alt yazılar kesilmesin, sarılsın */
/* halı sayfası foto kartı: alt bilgi iki katlı — üstte ad + ayar (tam genişlik), altta eylemler. Kart ızgara satırında
   eşit boy olduğundan eylemler (margin-top:auto) aynı satırdaki kartlarda aynı hizada; Claude notu ikisinin arasında. */
#izgara .alt-kart{display:contents}
#izgara .alt-kart .ad{order:1;border-top:1px solid var(--cizgi);padding:10px 12px 6px;white-space:normal;overflow:visible}
#izgara .ad-ad{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#izgara .kart > .claude-not{order:2}
#izgara .alt-kart .sag{order:3;margin-top:auto;padding:4px 12px 10px;flex-wrap:wrap;gap:6px}
#izgara .alt-kart .sag form:first-of-type{margin-left:auto}  /* seç + İndir solda, işlem simgeleri sağda */
#izgara .alt-kart .bag{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0 6px;border-radius:8px;white-space:nowrap}
#izgara .alt-kart .bag:hover{background:color-mix(in srgb,var(--kokboya) 8%,transparent)}
#izgara .alt-kart .sec,#izgara .alt-kart a.indir{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
@media (max-width:900px){#izgara .alt-kart .bag,#izgara .alt-kart .sec,#izgara .alt-kart a.indir{min-width:36px;min-height:36px}}
.if-dokun{display:none}
@media (hover:none){.if-fare{display:none}.if-dokun{display:inline}}  /* dokunmatikte "üzerine gel" yok */
.durum-hata{color:var(--kokboya)}
.uyari{color:var(--uyari)}
a.indir{font:600 14px var(--govde);color:var(--kokboya);text-decoration:none;white-space:nowrap}
.bos{border:1px solid var(--cizgi);border-radius:12px;padding:30px;text-align:center;color:var(--soluk);background:var(--kart)}
footer{margin-top:60px;color:var(--soluk);font-size:13px}
/* --- kütüphane eklentileri --- */
nav.ust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:15px}
nav.ust a{color:var(--yazi);text-decoration:none;font-weight:500}
nav.ust a:hover,nav.ust a.secili{color:var(--kokboya)}
nav.ust .kim{color:var(--soluk);font:13px var(--govde);font-variant-numeric:tabular-nums}
nav.ust form{margin:0}
.bag{background:none;border:0;padding:0;font:500 15px var(--govde);color:var(--soluk);cursor:pointer}
.bag:hover{color:var(--kokboya)}
h1.kucuk{font-size:clamp(26px,3.4vw,36px);max-width:none;margin:30px 0 8px}
.kutu{background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;padding:20px 22px}
.dar{max-width:440px;margin:60px auto 0}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-weight:500}
.form label small{color:var(--soluk);font-weight:400;font-size:13px}
.form input[type=text],.form input[type=email],.form input[type=password],.form textarea,.form select{width:100%;font:15px/20px var(--govde);padding:11px 12px;border-radius:8px;border:1px solid var(--cizgi);background:var(--yun);color:var(--yazi)}
.form textarea{min-height:90px;resize:vertical}
.form input[type=text],.form input[type=email],.form input[type=password],.form select{height:44px}  /* yanındaki .btn (44) ile eşit; select satır yüksekliğini tam uygulamadığı için sabit */
input[type=password]:focus-visible,input[type=email]:focus-visible,textarea:focus-visible,a:focus-visible,.bag:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.mesaj{border-radius:10px;padding:12px 14px;font-size:15px}
.mesaj.hata{background:color-mix(in srgb,var(--kokboya) 12%,var(--kart));color:var(--kokboya)}
.mesaj.bilgi{background:color-mix(in srgb,var(--indigo) 10%,var(--kart))}
.arama{display:flex;gap:10px;flex-wrap:wrap}
.arama input{width:240px;font-family:var(--govde)}
.hali-kart a.kapak{display:block;position:relative;aspect-ratio:1/1;background:repeating-conic-gradient(var(--dama1) 0 25%,var(--dama2) 0 50%) 0 0/18px 18px}
.hali-kart a.kapak img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hali-kart a.kapak .yok{position:absolute;inset:0;display:grid;place-items:center;color:var(--soluk);font:13px var(--govde);font-variant-numeric:tabular-nums}
.hali-kart .kod{font:600 18px var(--display);color:var(--yazi);text-decoration:none}
/* kütüphane/Bugün halı kartı: kod, rozetler ve seçim kutusu üstten hizalı (ortalı değil) → rozetler iki satıra
   sarılan kartla yan yanadaki kartta kod, rozet ve "seç" aynı hizada */
.hali-kart .alt-kart{align-items:flex-start}
.rozetler{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.rozet{font:500 12px var(--govde);padding:2px 7px;border-radius:5px;background:var(--yun);border:1px solid var(--cizgi);color:var(--soluk);font-variant-numeric:tabular-nums}
.rozet.iyi{color:var(--iyi)}.rozet.uyari{color:var(--uyari)}.rozet.hata{color:var(--kokboya)}
.sec{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--soluk)}
.bilgi-satir{display:flex;gap:22px;flex-wrap:wrap;color:var(--soluk);font-size:15px;margin:0 0 6px}
.bilgi-satir b{color:var(--yazi);font-weight:600}
.notlar{white-space:pre-wrap;max-width:70ch;color:var(--yazi);margin:6px 0 0}
.eylemler{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.eylemler form{margin:0}
.btn.kucuk{min-height:36px;padding:4px 12px;font-size:14px}
.btn.tehlike{background:transparent;color:var(--kokboya);border:1px solid color-mix(in srgb,var(--kokboya) 45%,var(--cizgi))}
.btn.tehlike:hover{background:color-mix(in srgb,var(--kokboya) 10%,transparent)}
.alt-kart .sag{display:flex;gap:10px;align-items:center}
.alt-kart form{margin:0}
.ilerleme{font:500 14px var(--govde);color:var(--soluk);min-height:1.5em;font-variant-numeric:tabular-nums}
table.liste{width:100%;border-collapse:collapse;font-size:15px}
table.liste th{font:600 12px var(--govde);letter-spacing:.06em;text-transform:uppercase;color:var(--soluk);text-align:left;padding:8px 10px;border-bottom:1px solid var(--cizgi);font-variant-numeric:tabular-nums}
table.liste td{padding:10px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
table.liste td form{display:inline-flex;gap:6px;align-items:center;margin:0 6px 0 0}
table.liste td form select{height:36px;padding-block:0}  /* yanındaki .btn.kucuk ile aynı boy (36 px) */
table.liste .btn{white-space:nowrap}
.tablo-sar{overflow-x:auto}
.sifre-kutu{font:500 22px var(--mono);letter-spacing:.04em;background:var(--yun);border:1px dashed var(--cizgi);border-radius:10px;padding:14px 16px;user-select:all;word-break:break-all}
.sayfalar{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:24px;font:14px var(--govde);font-variant-numeric:tabular-nums}
.sayfalar a{color:var(--kokboya)}
details.duzenle summary{cursor:pointer;color:var(--soluk);font-size:14px}
.kart:not(.hazir) .gorsel .once{clip-path:none}
.galeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:18px 0 6px}
.galeri a{display:block;aspect-ratio:1;background:#fff;border:1px solid var(--cizgi,#e5e5e5);border-radius:6px;overflow:hidden}
.galeri img{width:100%;height:100%;object-fit:contain;display:block}
/* tam ekran galeri: görsel ortada, oklar hemen yanında, X görselin köşesinde (Arda, 26 Eki 2026) */
.galeri-buyuk{--gb-yuk:100vh;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:16px 12px 10px;border:0;background:rgba(10,10,10,.94);color:#fff}
.galeri-buyuk[open]{display:flex;flex-direction:column;align-items:center;gap:8px}
.galeri-buyuk::backdrop{background:rgba(0,0,0,.6)}
.gb-sahne{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;outline:none}
.gb-kutu{position:relative;margin:0;display:flex;min-width:0}
.gb-kutu img{display:block;max-width:min(calc(100vw - 140px),1600px);max-height:calc(var(--gb-yuk) - 170px);object-fit:contain;background:#fff;border-radius:4px}
.galeri-buyuk button{background:none;border:0;color:#fff;cursor:pointer;line-height:1}
.gb-onceki,.gb-sonraki{flex:none;font-size:44px;padding:8px 10px;opacity:.85}
.gb-onceki:hover,.gb-sonraki:hover{opacity:1}
.galeri-buyuk .gb-kapat{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);font-size:26px;display:grid;place-items:center}
.gb-sayac{color:#ddd;font-size:14px;text-align:center}
.gb-serit{flex:none;max-width:100%;display:flex;gap:6px;overflow-x:auto;justify-content:safe center;padding:0 10px}
.galeri-buyuk .gb-serit button{flex:0 0 72px;height:72px;padding:0;border:2px solid transparent;border-radius:4px;background:#fff;opacity:.6}
.galeri-buyuk .gb-serit button.secili{border-color:#fff;opacity:1}
.gb-serit img{width:100%;height:100%;object-fit:contain;display:block}
@media (max-width:600px){.galeri{grid-template-columns:repeat(3,1fr)}.gb-kutu img{max-width:calc(100vw - 90px)}.gb-onceki,.gb-sonraki{font-size:34px;padding:6px 4px}}