/* =====================================================================
   ARGMINS TEMA KATMANI  (en son yüklenir; renk kararlarının tek yeri)

   Fikir: hesaplayıcı bir "ölçüm cihazı" gibi okunur.
     - Üst bar + sol ray  : tek parça koyu petrol gövde (L şeklinde çerçeve).
                            Hesap sayfalarının üst barı (hesap.css) ve logonun
                            kendi zemini de aynı renk (#102c32).
     - Besin spektrumu    : gövdenin alt kenarında N → P → K → Ca/Mg geçişli
                            ince şerit; gübre optimizasyonuna gönderme.
     - İçerik zemini      : açık nane, çok silik milimetrik ızgara
                            (laboratuvar defteri / hesap kâğıdı hissi).
     - Pencereler         : beyaz gövde, nane tonlu başlık; çalışma pencerelerinde
                            üstte spektrum (kural: "Besin spektrumu şeridi" bölümü).
     - Perde              : petrol tonu (--scrim-rgb); alanı, bulanıklığı ve
                            geçişi overlay_scrim.css'te, tüm pencerelerde ortak.
   ===================================================================== */

:root {
  /* Vurgu: teal (eylem) + nane (koyu zemin üstü vurgu) */
  --blue: #087b65;
  --blue-dark: #065c4c;
  --blue-soft: #e3f6ef;
  --mint: #67e8bc;
  --mint-soft: #b9f5df;

  /* Gövde (üst bar + ray) */
  --chassis: #102c32;
  --chassis-2: #143740;          /* hafif yükselti: sekme kabı, hover */
  --chassis-line: rgba(255, 255, 255, .09);
  --chassis-text: #e8f4f1;
  --chassis-muted: #9dbab6;
  /* Üst sekmeler, hesap ve araç menüsü aynı etkileşim dilini paylaşır. */
  --nav-radius: 10px;
  --nav-hover: rgba(255, 255, 255, .06);
  --nav-selected: rgba(103, 232, 188, .12);
  --nav-selected-line: rgba(103, 232, 188, .34);

  /* Besin spektrumu: N (yaprak yeşili) → P (amber) → K (mor) → Ca/Mg (teal) */
  --nutrient-spectrum: linear-gradient(90deg,
    #67e8bc 0%, #a7e26b 24%, #f2c14e 46%, #e58a5c 62%, #a77bdc 80%, #4cc3c9 100%);

  /* Nötrler: soğuk-yeşil aile (gövdeyle aynı ton ailesi) */
  --bg: #e8f1ee;
  --grid-line: rgba(8, 123, 101, .04);
  --grid-line-major: rgba(8, 123, 101, .065);
  --surface-soft: #f5faf8;
  --sunken: #e9f2ef;
  --line: #d6e3df;
  --line-strong: #bccfca;
  --text: #132a2e;
  --text-2: #43595b;
  --muted: #5f7472;
  --icon: #7a8e8b;
  --shadow-rgb: 16, 44, 50;
  --scrim-rgb: 10, 34, 39;
  --scrollbar-thumb: rgba(70, 105, 100, .32);
  --scrollbar-thumb-active: rgba(50, 88, 82, .6);
  --shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 6px 20px rgba(var(--shadow-rgb), .06);
}

/* ---------- İçerik zemini: milimetrik hesap kâğıdı ---------- */

html { background: var(--chassis); }
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(1200px 520px at 70% -120px, rgba(103, 232, 188, .16), transparent 70%);
  background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px, 100% 100%;
  background-attachment: fixed;
}

/* ---------- Üst bar ---------- */

.hesap-ust::after,
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--nutrient-spectrum);
  pointer-events: none;
}

.topbar {
  background: var(--chassis);
  color: var(--chassis-text);
  border-bottom: 0;
  box-shadow: 0 6px 22px rgba(var(--shadow-rgb), .18);
}
.topbar .status { color: var(--chassis-muted); }
.topbar .status.is-error { color: #ffc9cd; }

.topbar .app-tabs {
  padding: 0;
  gap: 3px;
  border-radius: calc(var(--nav-radius) + 4px);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
.topbar .app-tabs button {
  min-height: 36px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--nav-radius);
  color: var(--chassis-muted);
  font-size: .8125rem;
  font-weight: 600;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.topbar .argmins-icon-link { color: var(--chassis-text); border: 1px solid var(--chassis-line); }
.topbar .account-button {
  border-radius: var(--nav-radius);
  border-color: transparent;
  background: transparent;
  color: var(--chassis-muted);
}
.topbar .account-button .account-initial {
  background: rgba(103, 232, 188, .1);
  color: var(--mint-soft);
}
.topbar .app-tabs button[aria-selected="true"],
.topbar .account-button[aria-expanded="true"],
.drawer-rail-button[aria-expanded="true"] {
  background: var(--nav-selected);
  border-color: var(--nav-selected-line);
  color: var(--mint-soft);
  box-shadow: none;
}
.topbar .argmins-brand:focus-visible,
.topbar .argmins-icon-link:focus-visible,
.topbar .app-tabs button:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .topbar .app-tabs button:not([aria-selected="true"]):hover,
  .topbar .account-button:not([aria-expanded="true"]):hover,
  .drawer-rail-button:not([aria-expanded="true"]):hover {
    background: var(--nav-hover);
    border-color: var(--chassis-line);
    color: var(--chassis-text);
  }
}

.argmins-brand { display: inline-flex; flex: none; align-items: center; border-radius: 8px; }
.argmins-brand img { display: block; width: 138px; height: auto; }
.argmins-brand:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.argmins-icon-link {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #f4faf8;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.argmins-icon-link:hover { background: rgba(255, 255, 255, .1); }
.argmins-icon-link:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* ---------- Sol ray: gövdenin dikey kolu ---------- */

.drawer-rail {
  background: var(--chassis);
  border-right: 0;
  box-shadow: 6px 0 22px rgba(var(--shadow-rgb), .14);
}
/* Spektrum şeridi rayın sağ kenarından da iner: L çerçeve tamamlanır. */
.drawer-rail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #67e8bc 0%, rgba(103, 232, 188, .35) 35%, rgba(103, 232, 188, 0) 85%);
  pointer-events: none;
}

.drawer-rail-button {
  min-height: 60px;
  padding: 7px 2px;
  border: 1px solid transparent;
  border-radius: var(--nav-radius);
  background: transparent;
  color: var(--chassis-muted);
}
.drawer-rail-button::before { display: none; }
.drawer-rail-button .drawer-rail-icon,
.drawer-rail-button:hover .drawer-rail-icon,
.drawer-rail-button[aria-expanded="true"] .drawer-rail-icon {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.drawer-rail-label { font-size: .6875rem; font-weight: 600; letter-spacing: 0; }
.drawer-rail-help { background: transparent; border-color: transparent; }
.drawer-rail-help .drawer-rail-icon { width: 34px; height: 30px; border: 0; font-size: 1.15rem; }
.drawer-rail-button:focus-visible { outline: 3px solid var(--mint); outline-offset: 1px; }

@media (min-width: 768px) {
  .drawer-rail-button { width: 100%; }
}

@media (max-width: 767px) {
  :root { --bar-h: 56px; }
  .topbar .app-tabs button { position: relative; font-size: .75rem; }
  .topbar .account-button,
  .drawer-rail-button,
  .topbar .app-tabs button[aria-selected="true"],
  .topbar .account-button[aria-expanded="true"],
  .drawer-rail-button[aria-expanded="true"] { background: transparent; border-color: transparent; }
  .drawer-rail-button { position: relative; min-height: 48px; padding-block: 3px; gap: 2px; }
  .drawer-rail-button .drawer-rail-icon { height: 24px; }
  .drawer-rail-icon svg { width: 20px; height: 20px; }
  /* Dolgu yerine küçük bir işaret; görünmeyen dokunma alanı geniş kalır. */
  .topbar .app-tabs button[aria-selected="true"]::after,
  .drawer-rail-button[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: calc(50% - 8px);
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--mint);
  }
}

@media (pointer: coarse) {
  .topbar .app-tabs button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar .app-tabs button,
  .topbar .account-button { transition: none; }
}

/* ---------- Pencereler ---------- */

/* ---------- Besin spektrumu şeridi: nerede, nasıl ----------
   1) Gövde: yalnız üst barın alt kenarı (marka imzası, her ekranda bir kez).
      Ray / mobil alt çubuk kenarı tek renk nane: ikinci gökkuşağı çerçeve yapmaz.
   2) Çalışma pencereleri (içinde iş yapılan, kalıcı): yan çekmece (Ayarlar,
      Hedef, Reçetelerim), Gübre havuzu, Gübre ekle/düzenle, Tank aktarımı ve
      Hesap penceresi → üst kenarda 3 px, hareketsiz, yumuşak geçişli.
   3) Karar ve uyarı pencereleri (Sil / Varsayılana dön onayı, Uyarılar) ile
      geçici öğeler (rehber kartı, menüler, avatar menüsü, bildirimler):
      şerit yok; dikkat içerikte ve anlamlı renkte (kırmızı = tehlike) kalır.
   4) Hareket yalnız durum bildirir: optimizasyon hesaplanırken bekleme
      kartının şeridi akar; "azaltılmış hareket" tercihinde durur.
   5) Keskin bant yok: ayrık renkler lejant/veri gibi okunur; geçiş yumuşak.
   Şerit pencerenin üst KENARLIĞINA çizilir (border-box arka planı): köşe
   yuvarlaklığıyla kırpılır ve içerik (başlık zemini) onu örtemez. */
:root { --spectrum-h: 3px; }
.side-drawer,
.shelf-dialog,
.fertilizer-dialog,
.transfer-dialog,
.account-dialog:not(.is-menu) {
  border-top: var(--spectrum-h) solid transparent;
  background:
    var(--nutrient-spectrum) top left / 100% var(--spectrum-h) no-repeat border-box,
    var(--surface);
}
.side-drawer-head { background: linear-gradient(180deg, #eef8f4, #f6fbf9); }
.side-drawer-head .side-drawer-title { color: var(--text); }
.side-drawer-body { background: var(--surface); }

@media (min-width: 768px) {
  .side-drawer {
    border-color: rgba(var(--shadow-rgb), .14);
    box-shadow: 0 28px 70px rgba(var(--shadow-rgb), .32), 0 0 0 1px rgba(103, 232, 188, .12);
  }
  .side-drawer-head.is-root { padding-top: 11px; border-bottom-color: var(--line); }
}

/* ---------- Mobil: alt çubuk da gövdenin parçası ---------- */

@media (max-width: 767px) {
  .drawer-rail {
    background: var(--chassis);
    border-top: 0;
    box-shadow: 0 -6px 20px rgba(var(--shadow-rgb), .18);
  }
  /* Alt çubuk kenarı: tek renk nane çizgi (üstteki spektrumla çift çerçeve olmasın). */
  .drawer-rail::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
    background: rgba(103, 232, 188, .45);
  }

  .side-drawer-head { background: transparent; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 120px; }
  .topbar { flex-wrap: wrap; gap: 2px 8px; }
  .topbar .argmins-brand { display: inline-flex; }
  .topbar .app-tabs { order: 3; width: 100%; }
  .hesap-ust-ic { flex-wrap: wrap; }
}

/* Optimizasyon hesaplanıyor: şerit yalnız burada akar (ilerleme işareti). */
.optimization-busy-card { position: relative; overflow: hidden; }
.optimization-busy-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--spectrum-h);
  background: linear-gradient(90deg,
    #67e8bc 0%, #a7e26b 20%, #f2c14e 38%, #e58a5c 52%, #a77bdc 68%, #4cc3c9 84%, #67e8bc 100%) 0 0 / 240px 100% repeat-x;
  animation: spectrum-flow 1.6s linear infinite;
  pointer-events: none;
}
@keyframes spectrum-flow { to { background-position: 240px 0; } }
@media (prefers-reduced-motion: reduce) {
  .optimization-busy-card::before { animation: none; }
}

@media print {
  body { background: #fff; }
  .topbar::after { display: none; }
  .side-drawer, .shelf-dialog, .fertilizer-dialog, .transfer-dialog { border-top-width: 0; background: #fff; }
}

/* =====================================================================
   HAREKET KATMANI (Aşama 1, yalnız CSS)
   Amaç: gözün değişimi takip etmesi; işlemi yavaşlatmak değil.
     - Pencereler   : açılış, close_controls.css'teki kapanışın aynası (solma + 6 px).
                      Onaylar daha kısa: karar bekletilmez.
     - Ana sekmeler : gelen sayfa yalnız solar. Dönüşüm (transform) yok: içerideki
                      sabit konumlu öğeler (Optimizasyonu çalıştır, hesaplanıyor) kaymaz.
     - Yan panel    : panel değişiminde içerik yalnız solar; pencere hareketiyle
                      birleşen ikinci kayma (çift hareket) kaldırıldı.
     - Rehber       : vurgu kutusu adımlar arasında kayar; kart ve perde açılışta solar.
     - Hareketsiz   : Drip/Rapor/Reçete sekmeleri, seçiciler, sonuç sayıları, tablolar.
   Süreler başlangıç değerleridir; azaltılmış hareket tercihinde hepsi kapanır.
   ===================================================================== */
:root {
  --motion-content: 140ms;
  --motion-window: 170ms;
  --motion-decision: 120ms;
  --motion-spot: 220ms;
  --motion-enter: cubic-bezier(.22, .8, .24, 1);
}

@keyframes motion-fade-in { from { opacity: 0; } }
@keyframes motion-window-in { from { opacity: 0; scale: .98; translate: 0 6px; } }

/* Ortadaki pencereler (Gübre havuzu ve Hesap kendi açılışlarını korur). */
dialog.fertilizer-dialog[open]:not(.is-closing),
dialog.confirm-dialog[open]:not(.is-closing) {
  animation: motion-window-in var(--motion-window) var(--motion-enter);
}
dialog.confirm-dialog:not(.transfer-dialog):not(.notice-dialog)[open]:not(.is-closing) {
  animation-duration: var(--motion-decision);
}

/* Çözelti Hazırla ↔ Reçete Hesapla: gelen sayfa solar (yalnız opaklık). */
#calculator-panel:not([hidden]),
#optimization-panel:not([hidden]) {
  animation: motion-fade-in var(--motion-content) ease-out;
}

/* Yan panel: Ayarlar / Hedef / Reçetelerim arasında yalnız içerik solar. */
html[data-drawer] .drawer-pane:not([hidden]) {
  animation: motion-fade-in var(--motion-content) ease-out;
}

/* Rehber: açılışta kart ve perde solar; vurgu kutusu yeni hedefe kayar. */
.drawer-tour[open] .drawer-tour-card,
.drawer-tour[open] .drawer-tour-spot,
.drawer-tour[open]::backdrop {
  animation: motion-fade-in 180ms ease-out;
}
.drawer-tour-spot {
  transition:
    top var(--motion-spot) var(--motion-enter),
    left var(--motion-spot) var(--motion-enter),
    width var(--motion-spot) var(--motion-enter),
    height var(--motion-spot) var(--motion-enter);
}

@media (prefers-reduced-motion: reduce) {
  dialog.fertilizer-dialog[open]:not(.is-closing),
  dialog.confirm-dialog[open]:not(.is-closing),
  #calculator-panel:not([hidden]),
  #optimization-panel:not([hidden]),
  html[data-drawer] .drawer-pane:not([hidden]),
  .drawer-tour[open] .drawer-tour-card,
  .drawer-tour[open] .drawer-tour-spot,
  .drawer-tour[open]::backdrop { animation: none !important; }
  .drawer-tour-spot { transition: none; }
}