/* YH STÜDYO v2 (Faz H1): Higgsfield tarzı koyu stüdyo arayüzü, kendi markamızla (amber vurgu).
   Düzen: üstte ince gezinme; çalışma alanında solda kontrol paneli, ortada büyük sonuç akışı;
   telefonda kontrol paneli alta sabit "üretim çubuğu" olur. Satır içi stil yok (CSP). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  --zemin: #0a0a0b; --zemin-2: #111113; --panel: #141416; --kart: #1a1a1d; --kart-2: #222226; --cizgi: #2a2a2f; --cizgi-2: #3a3a41;
  --yazi: #f4f4f5; --yazi-2: #b4b4bb; --yazi-3: #7a7a84;
  --vurgu: #fbbf24; --vurgu-2: #f59e0b; --vurgu-koyu: #d97706; --vurgu-yazi: #111111; --vurgu-isik: rgba(251, 191, 36, .14);
  --yesil: #34d399; --yesil-z: rgba(52, 211, 153, .12); --kirmizi: #f87171; --kirmizi-z: rgba(248, 113, 113, .12);
  --mavi: #60a5fa; --mavi-z: rgba(96, 165, 250, .12); --mor: #a78bfa;
  --r: 16px; --r-k: 12px; --r-kk: 9px;
  --baslik: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --govde: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ust-h: 56px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--govde); background: var(--zemin); color: var(--yazi); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: var(--baslik); letter-spacing: -0.01em; margin: 0 0 8px; color: var(--yazi); }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; } h3 { font-size: .98rem; }
p { margin: 0 0 10px; }
a { color: var(--vurgu); }
.gizli { display: none !important; }
.ince { color: var(--yazi-2); font-size: .88rem; }
.cok-ince { color: var(--yazi-3); font-size: .8rem; }
::selection { background: var(--vurgu); color: #111; }

/* ---------- Düğmeler (her renk için :hover açık) ---------- */
.dugme { appearance: none; border: 1px solid var(--cizgi-2); background: var(--kart); color: var(--yazi); font: 600 .9rem var(--govde);
  padding: 9px 14px; border-radius: var(--r-k); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; text-decoration: none; }
.dugme:hover { background: var(--kart-2); border-color: var(--yazi-3); color: var(--yazi); }
.dugme:active { transform: scale(.98); }
.dugme:disabled { opacity: .45; cursor: not-allowed; }
.dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.dugme.birincil:hover { background: var(--vurgu-2); border-color: var(--vurgu-2); color: var(--vurgu-yazi); }
.dugme.koyu { background: var(--yazi); border-color: var(--yazi); color: #111; }
.dugme.koyu:hover { background: #d4d4d8; border-color: #d4d4d8; color: #111; }
.dugme.tehlike { color: var(--kirmizi); border-color: rgba(248,113,113,.35); background: transparent; }
.dugme.tehlike:hover { background: var(--kirmizi-z); border-color: var(--kirmizi); color: var(--kirmizi); }
.dugme.hayalet { background: transparent; border-color: transparent; color: var(--yazi-2); }
.dugme.hayalet:hover { background: var(--kart); border-color: var(--cizgi); color: var(--yazi); }
.dugme.kucuk { min-height: 32px; padding: 5px 10px; font-size: .82rem; border-radius: var(--r-kk); }
.dugme.genis { width: 100%; }
.dugme svg, .cip-dugme svg, .ikon-dugme svg { width: 16px; height: 16px; flex: 0 0 auto; }
.ikon-dugme { appearance: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--cizgi); background: rgba(10,10,11,.6);
  color: var(--yazi); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ikon-dugme:hover { background: var(--kart-2); border-color: var(--yazi-3); color: var(--vurgu); }
.ikon-dugme.secili { color: var(--vurgu); border-color: var(--vurgu); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* ---------- Form ---------- */
label.alan { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .84rem; color: var(--yazi-2); margin-bottom: 12px; }
input[type=text], input[type=password], input[type=number], input[type=month], select, textarea {
  font: 400 .95rem var(--govde); color: var(--yazi); background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--r-k);
  padding: 10px 12px; width: 100%; min-height: 42px; }
input:hover, select:hover, textarea:hover { border-color: var(--cizgi-2); }
input::placeholder, textarea::placeholder { color: var(--yazi-3); }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.onay-kutu { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; margin-bottom: 12px; cursor: pointer; }
.onay-kutu input { width: 18px; height: 18px; accent-color: var(--vurgu); }

/* ---------- Kabuk ---------- */
.ust { position: sticky; top: 0; z-index: 40; background: rgba(10,10,11,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: var(--ust-h); }
.logo { font-family: var(--baslik); font-weight: 900; font-size: 1.05rem; white-space: nowrap; letter-spacing: .02em; text-transform: uppercase; color: var(--yazi); }
.logo span { color: var(--vurgu); }
.sekmeler { display: flex; gap: 2px; }
.sekme { appearance: none; background: transparent; border: 0; color: var(--yazi-2); font: 600 .9rem var(--govde); padding: 8px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.sekme:hover { background: var(--kart); color: var(--yazi); }
.sekme.secili { color: var(--yazi); background: var(--kart-2); }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.butce { font-size: .8rem; font-weight: 600; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 999px; padding: 6px 12px; white-space: nowrap; cursor: pointer; color: var(--yazi); }
.butce:hover { border-color: var(--vurgu); color: var(--yazi); }
.butce.uyari { border-color: var(--vurgu); color: var(--vurgu); }
.menu-dugme { display: none; }
.ana { padding: 20px 16px 60px; max-width: 1480px; margin: 0 auto; }
.ana.calisma-ana { max-width: none; padding: 0; }
.kart { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px; margin-bottom: 16px; }
.izgara-2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.satir > .doldur { flex: 1 1 auto; }
.ayrac { height: 1px; background: var(--cizgi); margin: 14px 0; }
.alt-cubuk { display: none; }

/* Mobil menü sayfası */
.menu-liste { display: flex; flex-direction: column; gap: 6px; }
.menu-liste .sekme { text-align: left; font-size: 1rem; padding: 14px; background: var(--kart); }

/* ---------- Giriş / kurulum ---------- */
.giris-kap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(251,191,36,.18), transparent 60%), var(--zemin); }
.giris-kart { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--cizgi); border-radius: 20px; padding: 26px; }
.giris-kart .logo { font-size: 1.5rem; margin-bottom: 4px; }
.kod-adim { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--r-k); padding: 12px; font-size: .86rem; margin-bottom: 14px; color: var(--yazi-2); }
.kod-adim b { color: var(--yazi); }
.kod-adim ol { margin: 6px 0 0; padding-left: 20px; }

/* ---------- Bildirim, pencere, sayfa ---------- */
.bildirim { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--ust-h) + 12px); z-index: 90; max-width: min(92vw, 520px);
  background: var(--kart-2); color: var(--yazi); border: 1px solid var(--cizgi-2); padding: 11px 16px; border-radius: 12px; font-size: .9rem; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.bildirim.hata { border-color: var(--kirmizi); color: #fecaca; }
.bildirim.tamam { border-color: var(--yesil); color: #bbf7d0; }
.pencere-arka { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pencere { background: var(--panel); border: 1px solid var(--cizgi-2); border-radius: 18px; padding: 20px; max-width: 460px; width: 100%; max-height: 86vh; overflow: auto; }
.pencere .satir.alt { justify-content: flex-end; margin-top: 14px; }
.pencere.genis { max-width: 860px; }
.secim-liste { display: flex; flex-direction: column; gap: 6px; }
.secim { appearance: none; text-align: left; border: 1px solid var(--cizgi); background: var(--kart); color: var(--yazi); border-radius: var(--r-k); padding: 11px 13px; cursor: pointer; font: inherit; }
.secim:hover { border-color: var(--yazi-3); background: var(--kart-2); color: var(--yazi); }
.secim.secili { border-color: var(--vurgu); background: var(--vurgu-isik); color: var(--yazi); }
.secim b { display: block; font-size: .92rem; }
.secim small { display: block; color: var(--yazi-2); font-size: .8rem; margin-top: 2px; }
@media (max-width: 760px) {
  .pencere-arka { align-items: flex-end; padding: 0; }
  .pencere { border-radius: 20px 20px 0 0; max-width: none; max-height: 82vh; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- Kutular ve çipler ---------- */
.uyari-kutu { background: var(--vurgu-isik); color: #fde68a; border: 1px solid rgba(251,191,36,.3); border-radius: var(--r-k); padding: 10px 12px; font-size: .85rem; margin-bottom: 12px; }
.uyari-kutu a { color: var(--vurgu); }
.hata-kutu { background: var(--kirmizi-z); color: #fecaca; border: 1px solid rgba(248,113,113,.3); border-radius: var(--r-k); padding: 10px 12px; font-size: .85rem; margin-bottom: 12px; }
.cip { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--kart-2); color: var(--yazi-2); white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.cip.tamam { background: var(--yesil-z); color: var(--yesil); }
.cip.calisiyor { background: var(--mavi-z); color: var(--mavi); }
.cip.hata { background: var(--kirmizi-z); color: var(--kirmizi); }
.cip.belirsiz { background: var(--vurgu-isik); color: var(--vurgu); }

/* ================= ÇALIŞMA ALANI (Görsel / Video) ================= */
.calisma { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: calc(100vh - var(--ust-h)); }
.ray { position: sticky; top: var(--ust-h); height: calc(100vh - var(--ust-h)); overflow: auto; border-right: 1px solid var(--cizgi);
  background: var(--zemin-2); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ray-blok { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px; }
.ray-baslik { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; color: var(--yazi-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.ray-baslik .doldur { flex: 1; }
/* Reçete / mod kartı */
.mod-kart { position: relative; border-radius: var(--r); overflow: hidden; min-height: 92px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end;
  border: 1px solid var(--cizgi); cursor: pointer; text-align: left; font: inherit; color: var(--yazi); width: 100%; background: var(--kart); }
.mod-kart:hover { border-color: var(--vurgu); color: var(--yazi); }
.mod-kart .mk-ust { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); }
.mod-kart .mk-ad { font-family: var(--baslik); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; line-height: 1.1; }
.mod-kart .mk-alt { font-size: .78rem; color: var(--yazi-2); margin-top: 3px; }
.girdi .g-sil svg { width: 14px; height: 14px; }
.mod-kart .mk-degistir { position: absolute; top: 10px; right: 10px; font-size: .74rem; font-weight: 700; background: rgba(0,0,0,.45); border: 1px solid var(--cizgi-2); border-radius: 999px; padding: 3px 10px; }
.renk-amber { background: linear-gradient(135deg, #3a2a05 0%, #1a1a1d 70%); }
.renk-mavi { background: linear-gradient(135deg, #0b2440 0%, #1a1a1d 70%); }
.renk-yesil { background: linear-gradient(135deg, #082c22 0%, #1a1a1d 70%); }
.renk-mor { background: linear-gradient(135deg, #24164a 0%, #1a1a1d 70%); }
.renk-serbest { background: linear-gradient(135deg, #26262b 0%, #141416 80%); }
/* Girdi kutuları (başlangıç / bitiş / referans) */
.girdiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.girdi { position: relative; aspect-ratio: 1.15; border-radius: var(--r-k); border: 1px dashed var(--cizgi-2); background: var(--zemin-2); color: var(--yazi-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 600 .78rem var(--govde); text-align: center; padding: 8px; overflow: hidden; }
.girdi:hover { border-color: var(--vurgu); color: var(--yazi); }
.girdi.dolu { border-style: solid; border-color: var(--cizgi-2); padding: 0; }
.girdi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.girdi .g-etiket { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.65); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: .68rem; }
.girdi .g-sil { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 8px; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.girdi .g-sil:hover { background: var(--kirmizi); color: #fff; }
.girdi svg { width: 20px; height: 20px; }
.girdi.zorunlu-eksik { border-color: var(--vurgu); }
/* Metin alanları */
.ray textarea { min-height: 120px; background: var(--zemin-2); }
.ray input[type=text] { background: var(--zemin-2); }
/* Ayar çipleri */
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip-dugme { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--yazi); border-radius: 10px;
  padding: 7px 10px; font: 600 .8rem var(--govde); cursor: pointer; white-space: nowrap; }
.cip-dugme:hover { border-color: var(--yazi-3); background: var(--kart-2); color: var(--yazi); }
.cip-dugme .cd-ad { color: var(--yazi-3); font-weight: 600; }
.cip-dugme.recete-cip { display: none; }
/* Üret düğmesi */
.uret-dugme { appearance: none; width: 100%; border: 0; border-radius: 14px; min-height: 54px; cursor: pointer; font: 900 1rem var(--baslik); letter-spacing: .06em; text-transform: uppercase;
  color: var(--vurgu-yazi); background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 55%, #f59e0b 100%); box-shadow: 0 10px 30px -12px rgba(251,191,36,.6);
  display: flex; align-items: center; justify-content: center; gap: 10px; }
.uret-dugme:hover { background: linear-gradient(180deg, #fde68a 0%, #fcd34d 55%, #fbbf24 100%); color: var(--vurgu-yazi); }
.uret-dugme:disabled { background: var(--kart-2); color: var(--yazi-3); box-shadow: none; cursor: not-allowed; }
.uret-dugme svg { width: 18px; height: 18px; flex: 0 0 auto; }
.uret-dugme .ud-fiyat { font: 700 .85rem var(--govde); letter-spacing: 0; text-transform: none; background: rgba(0,0,0,.14); padding: 3px 8px; border-radius: 8px; }
.ray-alt { font-size: .76rem; color: var(--yazi-3); text-align: center; }
.ray-alt.uyari { color: var(--vurgu); }
/* Akış */
.akis { padding: 18px 20px 40px; min-width: 0; }
.akis-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.akis-ust h1 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.akis-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sonuc { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.sonuc-medya { position: relative; aspect-ratio: 4 / 5; background: #050506; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.sonuc-medya img, .sonuc-medya video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sonuc-medya .bekleme { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--yazi-2); font-size: .85rem; text-align: center; padding: 16px; }
.donen { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--cizgi-2); border-top-color: var(--vurgu); animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .donen { animation: none; } }
.sonuc-medya .sm-ust { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; align-items: center; }
.sonuc-medya .sm-eylem { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s ease; }
.sonuc:hover .sm-eylem, .sonuc:focus-within .sm-eylem { opacity: 1; }
.sonuc-bilgi { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sonuc-bilgi .sb-satir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .76rem; color: var(--yazi-3); }
.sonuc-bilgi .sb-model { color: var(--yazi); font-weight: 700; font-size: .82rem; }
.sonuc-bilgi .sb-prompt { font-size: .82rem; color: var(--yazi-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sonuc-bilgi .sb-hata { font-size: .8rem; color: var(--kirmizi); }
.sonuc-eylemler { display: flex; gap: 6px; flex-wrap: wrap; }
/* Kare onayı (zincir hazırlık karesi bitince) */
.kare-onay { position: absolute; inset: 0; display: flex; flex-direction: column; background: #050506; cursor: default; }
.aday-izgara { flex: 1 1 auto; display: grid; grid-template-columns: 1fr; gap: 2px; min-height: 0; }
.aday-izgara.coklu { grid-template-columns: 1fr 1fr; }
.aday { position: relative; border: 0; padding: 0; margin: 0; background: #000; cursor: pointer; overflow: hidden; outline: 3px solid transparent; outline-offset: -3px; min-height: 0; }
.aday img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .75; transition: opacity .15s ease; }
.aday:hover img { opacity: .95; }
.aday.secili { outline-color: var(--vurgu); }
.aday.secili img { opacity: 1; }
.aday-no { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.7); color: #fff; font: 700 .7rem var(--govde); border-radius: 6px; padding: 1px 7px; }
.aday.secili .aday-no { background: var(--vurgu); color: #111; }
.ko-metin { font-size: .78rem; color: var(--yazi-2); padding: 8px 10px 0; background: var(--panel); }
.ko-eylem { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px 10px; background: var(--panel); }
.bos-akis { border: 1px dashed var(--cizgi-2); border-radius: var(--r); padding: 40px 20px; text-align: center; color: var(--yazi-2); }
.bos-akis h2 { font-size: 1.3rem; text-transform: uppercase; }
.bos-durum { max-width: 520px; margin: 32px auto; border: 1px dashed var(--cizgi-2); border-radius: var(--r); padding: 28px 20px; text-align: center; }
.bos-durum h3 { margin: 0 0 10px; }
.bos-durum p { margin: 0 0 10px; }
.bos-durum .dugme { margin-top: 8px; }

/* ================= KEŞFET ================= */
.kahraman { position: relative; border-radius: 22px; overflow: hidden; padding: 44px 28px; margin-bottom: 22px; border: 1px solid var(--cizgi);
  background: radial-gradient(900px 400px at 85% 10%, rgba(251,191,36,.28), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(96,165,250,.12), transparent 60%), var(--panel); }
.kahraman h1 { font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.01em; margin-bottom: 12px; }
.kahraman h1 span { color: var(--vurgu); }
.kahraman p { color: var(--yazi-2); max-width: 620px; font-size: 1rem; }
.kahraman .satir { margin-top: 16px; }
.bolum-baslik { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.bolum-baslik h2 { margin: 0; text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.recete-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.recete-kart { appearance: none; position: relative; text-align: left; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; border: 1px solid var(--cizgi); cursor: pointer;
  padding: 0; color: var(--yazi); font: inherit; display: flex; flex-direction: column; justify-content: flex-end; }
.recete-kart:hover { border-color: var(--vurgu); color: var(--yazi); }
.recete-kart:hover .rk-kapak { transform: scale(1.04); }
.recete-kart .rk-kapak { position: absolute; inset: 0; transition: transform .35s ease; }
.recete-kart .rk-kapak img, .recete-kart .rk-kapak video { width: 100%; height: 100%; object-fit: cover; display: block; }
.recete-kart .rk-desen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .5; }
.recete-kart .rk-desen svg { width: 42%; height: 42%; color: var(--yazi-2); }
.recete-kart .rk-govde { position: relative; padding: 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85) 45%); }
.recete-kart .rk-kategori { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); }
.recete-kart .rk-ad { font-family: var(--baslik); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; line-height: 1.1; margin: 2px 0 4px; }
.recete-kart .rk-acik { font-size: .78rem; color: var(--yazi-2); }
.recete-kart .rk-rozet { position: absolute; top: 10px; left: 10px; font-size: .68rem; font-weight: 800; background: rgba(0,0,0,.6); border: 1px solid var(--cizgi-2); border-radius: 999px; padding: 2px 9px; text-transform: uppercase; }
.recete-kart.yakinda { cursor: default; opacity: .7; }
.recete-kart.yakinda:hover { border-color: var(--cizgi); }
.recete-kart.yakinda:hover .rk-kapak { transform: none; }

/* ================= KÜTÜPHANE (galeri + yükleme) ================= */
.filtre { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filtre .dugme.secili { background: var(--yazi); color: #111; border-color: var(--yazi); }
.filtre .dugme.secili:hover { background: #d4d4d8; color: #111; border-color: #d4d4d8; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.oge { position: relative; border-radius: 12px; overflow: hidden; background: #050506; aspect-ratio: 1; cursor: pointer; border: 1px solid var(--cizgi); padding: 0; width: 100%; }
.oge img, .oge video { width: 100%; height: 100%; object-fit: cover; display: block; }
.oge .rozet { position: absolute; left: 6px; bottom: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.oge .rozet.sag { left: auto; right: 6px; color: var(--vurgu); }
.oge:hover { border-color: var(--vurgu); }
.oge.secili { outline: 3px solid var(--vurgu); outline-offset: -3px; }
.perde { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.94); display: flex; flex-direction: column; }
.perde-ust { display: flex; gap: 8px; align-items: center; padding: 10px 12px; color: #fff; flex-wrap: wrap; }
.perde-ust .doldur { flex: 1 1 auto; min-width: 0; font-size: .85rem; color: var(--yazi-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perde-govde { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 0; }
.perde-govde img, .perde-govde video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; background: #000; }
.birak { border: 1.5px dashed var(--cizgi-2); border-radius: var(--r); padding: 26px 14px; text-align: center; background: var(--zemin-2); }
.birak.ustunde { border-color: var(--vurgu); background: var(--vurgu-isik); }
.ilerleme { height: 6px; background: var(--kart-2); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.ilerleme > i { display: block; height: 100%; width: 0; background: var(--vurgu); transition: width .2s ease; }
.yukleme-satir { padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: .86rem; }
.rehber li { margin-bottom: 4px; }

/* ================= DEFTER ================= */
table.tablo { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tablo th, table.tablo td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
table.tablo th { color: var(--yazi-3); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.tablo-kap { overflow-x: auto; }
.sag { text-align: right !important; white-space: nowrap; }
.eksi { color: var(--yesil); }

/* ================= TELEFON ================= */
@media (max-width: 900px) {
  .sekmeler.ust-sekmeler { display: none; }
  .menu-dugme { display: inline-flex; }
  .butce { font-size: .74rem; padding: 5px 10px; }
  .izgara-2 { grid-template-columns: minmax(0, 1fr); }
  .calisma { display: block; }
  /* Kontrol paneli alta sabit üretim çubuğu olur */
  .ray { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; max-height: 62vh; z-index: 30; border-right: 0; border-top: 1px solid var(--cizgi);
    border-radius: 18px 18px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; background: rgba(17,17,19,.97); backdrop-filter: blur(12px); }
  .ray .ray-blok { padding: 0; border: 0; background: transparent; }
  .ray .ray-baslik, .ray .mod-blok, .ray .ray-alt.ikincil { display: none; }
  .ray .girdiler { display: flex; gap: 6px; overflow-x: auto; }
  .ray .girdi { flex: 0 0 64px; width: 64px; height: 64px; aspect-ratio: auto; font-size: .62rem; padding: 4px; }
  .ray .girdi svg { width: 16px; height: 16px; }
  .ray .girdi .g-etiket { display: none; }
  .ray textarea { min-height: 52px; height: 52px; font-size: .92rem; }
  .ray .cipler { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .cip-dugme.recete-cip { display: inline-flex; border-color: var(--vurgu); }
  .uret-dugme { min-height: 48px; }
  .akis { padding: 14px 12px 280px; }
  .akis-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sonuc-bilgi { padding: 8px; }
  .sonuc-bilgi .sb-prompt { -webkit-line-clamp: 1; }
  .sonuc-medya .sm-eylem { opacity: 1; }
  .sonuc-eylemler .dugme { min-height: 30px; padding: 4px 8px; font-size: .74rem; }
  .kahraman { padding: 28px 18px; }
  .recete-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recete-kart .rk-ad { font-size: 1rem; }
  .recete-kart .rk-acik { display: none; }
}
@media (max-width: 420px) {
  .akis-izgara { grid-template-columns: minmax(0, 1fr); }
}