/* ═══ Solarveyo Stüdyo — Tasarım Sistemi v2 ═══
   Tek doğruluk kaynağı: renk, tipografi, boşluk, bileşenler + karanlık mod.
   Şablonlara stil eklemeden önce buraya bak. Token kullan, sabit renk yazma. */

/* ── Inter fontu (vendor, CDN yok) ── */
@font-face { font-family: Inter; font-weight: 400; font-display: swap;
  src: url("/static/vendor/inter/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap;
  src: url("/static/vendor/inter/inter-500.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
  src: url("/static/vendor/inter/inter-600.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap;
  src: url("/static/vendor/inter/inter-700.woff2") format("woff2"); }

:root {
  /* marka — güven yeşili (birincil) */
  --yesil-700: #124d2b;
  --yesil-600: #1a6b3c;
  --yesil-500: #22874c;
  --yesil-100: #e3f3e9;
  --vurgu:     #4cd97a;
  /* solar — enerji vurgusu (CTA, ikincil vurgu) */
  --solar-600: #ea8a00;
  --solar-500: #f59e0b;
  --solar-100: #fff3df;
  /* nötr yüzeyler (açık tema) */
  --zemin:     #f5f7f6;
  --yuzey:     #ffffff;
  --yuzey-2:   #f0f3f1;   /* tablo başlığı, ikincil dolgu */
  --cizgi:     #e3e7e5;
  --cizgi-2:   #cdd5d0;   /* girdi kenarı */
  --metin:     #1d2520;
  --soluk:     #68756e;
  --soluk-2:   #8a968f;
  /* semantik */
  --tehlike:   #c0392b;  --tehlike-100: #fdeaea;
  --uyari:     #b35c00;  --uyari-100:   #fff3e0;
  --bilgi:     #1565c0;  --bilgi-100:   #e7f0fb;
  /* biçim */
  --r-s: 6px; --r-m: 9px; --r-l: 14px; --r-hap: 999px;
  --golge-s: 0 1px 2px rgb(16 36 26 / .06);
  --golge-m: 0 6px 20px rgb(16 36 26 / .10);
  --golge-l: 0 14px 40px rgb(16 36 26 / .16);
  --gecis: .16s cubic-bezier(.4,0,.2,1);
  /* boşluk ritmi (4x) */
  --b1: 4px; --b2: 8px; --b3: 12px; --b4: 16px; --b5: 20px; --b6: 24px;
  /* z katmanları */
  --z-sabit: 10; --z-acilir: 100; --z-modal: 1000; --z-toast: 2000;
}

/* ── karanlık mod: yalnız yüzey/metin token'ları döner, bileşenler uyar ── */
:root[data-tema="koyu"] {
  --zemin:   #10161a;
  --yuzey:   #182126;
  --yuzey-2: #1f2a30;
  --cizgi:   #263238;
  --cizgi-2: #37474f;
  --metin:   #e6ecea;
  --soluk:   #9fb0aa;
  --soluk-2: #7c8d87;
  --yesil-100: #16362a;
  --solar-100: #3a2a10;
  --tehlike-100: #3a1e1c; --uyari-100: #3a2a10; --bilgi-100: #16283a;
  --golge-s: 0 1px 2px rgb(0 0 0 / .3);
  --golge-m: 0 6px 20px rgb(0 0 0 / .4);
  --golge-l: 0 14px 40px rgb(0 0 0 / .55);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
       font-size: 14px; line-height: 1.5; color: var(--metin); margin: 0;
       background: var(--zemin); -webkit-font-smoothing: antialiased; }
a { color: var(--yesil-600); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; font-weight: 700; margin: .2rem 0 1rem;
     letter-spacing: -.02em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.3rem 0 .5rem;
     letter-spacing: -.01em; }
h3 { font-size: .95rem; font-weight: 600; margin: .9rem 0 .35rem; }
small { color: var(--soluk); }
::selection { background: var(--yesil-100); }

/* ── girdiler ── */
input, select, button, textarea { font: inherit; }
input, select, textarea {
  padding: .5rem .6rem; border: 1px solid var(--cizgi-2);
  border-radius: var(--r-s); background: var(--yuzey); color: var(--metin);
  transition: border-color var(--gecis), box-shadow var(--gecis); }
input:focus, select:focus, textarea:focus { border-color: var(--yesil-500); }
input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
label { display: flex; flex-direction: column; gap: 3px;
        font-size: .8rem; color: var(--soluk); }

/* ── butonlar ── */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .9rem; border: 0; border-radius: var(--r-m);
  background: var(--yesil-600); color: #fff; cursor: pointer; font-weight: 600;
  transition: background var(--gecis), transform .05s, box-shadow var(--gecis); }
button:hover, .btn:hover { background: var(--yesil-700); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn--solar { background: var(--solar-500); }
.btn--solar:hover { background: var(--solar-600); }
.btn--ikincil, .ikincil { background: var(--yuzey); color: var(--yesil-600);
                border: 1px solid var(--cizgi-2); }
.btn--ikincil:hover, .ikincil:hover { background: var(--yesil-100);
                border-color: var(--yesil-500); }
.btn--hayalet { background: transparent; color: var(--metin);
                border: 1px solid var(--cizgi); }
.btn--hayalet:hover { background: var(--yuzey-2); }
.btn--tehlike { background: var(--tehlike-100); color: var(--tehlike); }
.btn--tehlike:hover { background: var(--tehlike); color: #fff; }
.buyuk { width: 100%; padding: .72rem; border-radius: var(--r-m);
         font-weight: 700; margin-top: .5rem; }

/* ── kart / kutu ── */
.kutu, .kart {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-l); padding: var(--b5) 1.25rem;
  margin: var(--b4) 0; box-shadow: var(--golge-s); }

/* ── tablo ── */
table { border-collapse: collapse; width: 100%; margin: .5rem 0;
        background: var(--yuzey); font-size: .88rem; }
th, td { border: 1px solid var(--cizgi); padding: .5rem .65rem;
         text-align: left; }
th { background: var(--yuzey-2); font-weight: 600; }
tr:hover td { background: var(--yuzey-2); }

/* ── rozetler ── */
.rozet { display: inline-flex; align-items: center; gap: .25rem;
         font-size: .72rem; padding: .14rem .55rem; border-radius: var(--r-hap);
         background: var(--yuzey-2); color: var(--soluk); font-weight: 600; }
.rozet.tamam { background: var(--yesil-100); color: var(--yesil-600); }
.rozet.hata { background: var(--tehlike-100); color: var(--tehlike); }
.rozet.isleniyor { background: var(--uyari-100); color: var(--uyari); }

/* ── durum + kutular ── */
.durum-tamam { color: var(--yesil-600); }
.durum-isleniyor { color: var(--uyari); }
.durum-hata { color: var(--tehlike); }
.hata { background: var(--tehlike-100); color: var(--tehlike);
        padding: .6rem .75rem; border-radius: var(--r-m); font-size: .84rem; }
.uyari-kutu { background: var(--uyari-100); color: var(--uyari);
              padding: .6rem .75rem; border-radius: var(--r-m);
              font-size: .8rem; margin-top: .6rem; }

/* ── istatistik karoları ── */
.kartlar { display: grid;
           grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
           gap: var(--b3); margin: .6rem 0 1.1rem; }
.stat { background: var(--yuzey); border: 1px solid var(--cizgi);
        border-radius: var(--r-l); padding: .9rem 1.1rem;
        box-shadow: var(--golge-s); }
.stat b { display: block; font-size: 1.6rem; font-weight: 700;
          color: var(--yesil-600); letter-spacing: -.03em; }
.stat span { font-size: .76rem; color: var(--soluk); }
.stat--mini { padding: .55rem .75rem; }
.stat--mini b { font-size: 1.15rem; }

/* ── proje kartları ── */
.proje-kartlar { display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
                 gap: var(--b4); }
.proje-kart { background: var(--yuzey); border: 1px solid var(--cizgi);
              border-radius: var(--r-l); padding: 1.05rem 1.15rem;
              display: flex; flex-direction: column; gap: .35rem;
              box-shadow: var(--golge-s);
              transition: box-shadow var(--gecis), transform var(--gecis); }
.proje-kart:hover { box-shadow: var(--golge-m); transform: translateY(-2px); }
.proje-kart h3 { margin: 0; font-size: 1.02rem; }
.proje-kart .meta { font-size: .76rem; color: var(--soluk); }
.proje-kart .linkler { margin-top: .5rem; font-size: .82rem;
                       display: flex; gap: .7rem; flex-wrap: wrap; }

/* ── form satırı + adım göstergeleri ── */
form.satir { display: flex; gap: var(--b2); flex-wrap: wrap; align-items: end; }
.adimlar { font-size: .82rem; color: var(--soluk-2); margin: .2rem 0 .8rem; }
.adim.tamam { color: var(--yesil-600); font-weight: 600; }
.adim.sirada { color: var(--uyari); font-weight: 700;
               background: var(--uyari-100); padding: .1rem .45rem;
               border-radius: var(--r-s); }
.adimbar { display: flex; gap: .2rem; align-items: center;
           justify-content: center; flex: 1; min-width: 300px; }
.adimbar .a { display: flex; align-items: center; gap: .35rem;
              padding: .32rem .8rem; border-radius: var(--r-hap);
              font-size: .8rem; color: var(--soluk-2); background: var(--yuzey-2);
              transition: all .35s ease; white-space: nowrap; }
.adimbar .a.aktif { background: var(--yesil-600); color: #fff; font-weight: 700;
                    transform: scale(1.06);
                    box-shadow: 0 2px 10px rgb(26 107 60 / .4); }
.adimbar .a.tamam { background: var(--yesil-100); color: var(--yesil-600); }
.adimbar .ok { color: var(--cizgi-2); }

.panel { display: none; animation: panel-gel .4s ease; }
.panel.aktif { display: block; }
@keyframes panel-gel { from { opacity: 0; transform: translateX(24px); }
                       to { opacity: 1; transform: none; } }

/* ── araç düğmeleri (stüdyo) ── */
.arac { display: flex; align-items: center; gap: .5rem; width: 100%;
        text-align: left; margin: .2rem 0; padding: .5rem .65rem;
        border: 1px solid var(--cizgi-2); border-radius: var(--r-m);
        background: var(--yuzey); color: var(--metin); font-size: .84rem;
        cursor: pointer; font-weight: 500; transition: all var(--gecis); }
.arac:hover { background: var(--yesil-100); border-color: var(--yesil-500); }
.arac.aktif { background: var(--yesil-600); color: #fff;
              border-color: var(--yesil-600); }

.cikti { display: flex; align-items: center; gap: .5rem;
         padding: .55rem .7rem; margin: .35rem 0; background: var(--yuzey-2);
         border-radius: var(--r-m); text-decoration: none; color: var(--metin);
         font-size: .85rem; transition: background var(--gecis); }
.cikti:hover { background: var(--yesil-100); text-decoration: none; }

.kalem { display: flex; justify-content: space-between; gap: .6rem;
         padding: .35rem 0; border-bottom: 1px dashed var(--cizgi);
         font-size: .85rem; }
.kalem b { color: var(--yesil-600); text-align: right; }

.sekmeler { display: flex; border-bottom: 1px solid var(--cizgi); }
.sekmeler button { flex: 1; background: none; border: 0; padding: .6rem .2rem;
                   cursor: pointer; color: var(--soluk); font-size: .82rem;
                   font-weight: 600; border-bottom: 2px solid transparent;
                   border-radius: 0; }
.sekmeler button:hover { background: var(--yuzey-2); color: var(--metin); }
.sekmeler button.aktif { color: var(--yesil-600);
                         border-bottom-color: var(--yesil-600); }

/* ── yükleniyor ── */
.bekliyor { text-align: center; padding: 2.2rem 0; color: var(--uyari); }
.bekliyor .d { font-size: 2.2rem; display: inline-block;
               animation: don 1.2s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg,
              var(--yuzey-2) 25%, var(--cizgi) 37%, var(--yuzey-2) 63%);
            background-size: 400% 100%; border-radius: var(--r-s);
            animation: kayar 1.3s ease infinite; }
@keyframes kayar { from { background-position: 100% 0; }
                   to { background-position: 0 0; } }

/* ── katlanır bölüm ── */
details.bolum { border: 1px solid var(--cizgi); border-radius: var(--r-m);
                margin: .5rem 0; background: var(--yuzey); }
details.bolum > summary { cursor: pointer; padding: .6rem .7rem; font-weight: 600;
                          font-size: .85rem; list-style: none; display: flex;
                          justify-content: space-between; align-items: center; }
details.bolum > summary::after { content: "▸"; color: var(--soluk);
                                 transition: transform var(--gecis); }
details.bolum[open] > summary::after { transform: rotate(90deg); }
details.bolum > .bolum-icerik { padding: .2rem .7rem .7rem; }

/* ── boş durum ── */
.bos-durum { text-align: center; padding: 3rem 1.5rem; color: var(--soluk);
             border: 2px dashed var(--cizgi); border-radius: var(--r-l);
             background: var(--yuzey); }
.bos-durum .ikon { font-size: 2.6rem; display: block; margin-bottom: .6rem;
                   opacity: .8; }
.bos-durum h3 { color: var(--metin); margin: 0 0 .3rem; }

/* ── modal ── */
.modal-perde { position: fixed; inset: 0; background: rgb(16 36 26 / .45);
               display: none; align-items: center; justify-content: center;
               z-index: var(--z-modal); padding: 1rem;
               animation: perde-gir .15s ease; }
.modal-perde.acik { display: flex; }
@keyframes perde-gir { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--yuzey); border-radius: var(--r-l); max-width: 460px;
         width: 100%; padding: 1.4rem; box-shadow: var(--golge-l);
         animation: modal-gir .2s cubic-bezier(.4,0,.2,1); }
@keyframes modal-gir { from { opacity: 0; transform: translateY(16px) scale(.98); }
                       to { opacity: 1; transform: none; } }
.modal h2 { margin-top: 0; }
.modal-butonlar { display: flex; gap: .6rem; justify-content: flex-end;
                  margin-top: 1.2rem; }

/* ── toast bildirim ── */
#toast-alan { position: fixed; bottom: 1.2rem; right: 1.2rem;
              display: flex; flex-direction: column; gap: .5rem;
              z-index: var(--z-toast); }
.toast { background: var(--metin); color: var(--yuzey); padding: .7rem 1rem;
         border-radius: var(--r-m); box-shadow: var(--golge-l);
         font-size: .85rem; display: flex; align-items: center; gap: .5rem;
         animation: toast-gir .25s cubic-bezier(.4,0,.2,1);
         border-left: 3px solid var(--vurgu); max-width: 340px; }
.toast.basari { border-left-color: var(--vurgu); }
.toast.hata { border-left-color: var(--tehlike); }
.toast.uyari { border-left-color: var(--solar-500); }
@keyframes toast-gir { from { opacity: 0; transform: translateX(30px); }
                       to { opacity: 1; transform: none; } }

/* ── tooltip (data-ipucu) ── */
[data-ipucu] { position: relative; }
[data-ipucu]:hover::after { content: attr(data-ipucu); position: absolute;
  bottom: 125%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--metin); color: var(--yuzey); padding: .3rem .55rem;
  border-radius: var(--r-s); font-size: .74rem; z-index: var(--z-acilir);
  box-shadow: var(--golge-m); pointer-events: none; }

/* harita ipucu balonu */
#ipucu { position: absolute; pointer-events: none; background: var(--metin);
         color: var(--yuzey); padding: .3rem .6rem; border-radius: var(--r-s);
         font-size: .8rem; display: none; z-index: 20; box-shadow: var(--golge-m); }