/* şehrimde — ortak görsel dil.
   Kaynak: tasarim/01-tema.md · Apple tarzı sadelik + metalik mavi.

   KURAL: her renk önce sade :root bloğunda tanımlanır. Yalnızca medya
   sorgusu içinde tanımlanan bir renk, sistem ayarı "otomatik" olan
   kullanıcıda hiç uygulanmaz. */

:root {
  --zemin: #f1f4f8;
  --yuzey: #ffffff;
  --yuzey-2: #f7f9fc;
  --metin: #0b1420;
  --metin-2: #57697c;
  --cizgi: #dce4ed;
  --vurgu: #1a6dcc;
  --vurgu-zemin: #e8f1fb;
  --hero: #05090f;          /* her iki temada koyu kalır — bilinçli */
  --iyi: #0f7a52;
  --iyi-zemin: #e6f4ee;
  --uyari: #9a6008;
  --uyari-zemin: #fdf3e2;
  --kotu: #a32a2a;
  --kotu-zemin: #fbeaea;

  --metalik: linear-gradient(118deg,
    #0e3a6b 0%, #1c5fa6 22%, #4b93da 42%,
    #c7e2f8 54%, #5a9edf 66%, #1b5091 86%, #0c3260 100%);
  --dugme-metalik: linear-gradient(180deg, #cfe6fa, #7fb5e4 60%, #5b98d2);

  --r: 14px;
  --r-kucuk: 9px;
  --golge: 0 1px 2px rgba(11, 20, 32, .05), 0 8px 24px -12px rgba(11, 20, 32, .18);
  --yazi: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Varsayılan tema daima açık/beyazdır. Koyu tema yalnızca kullanıcı
   üst menüden seçtiğinde (data-tema="koyu") devreye girer. */

:root[data-tema="koyu"] {
  --zemin: #070b11;
  --yuzey: #0e141d;
  --yuzey-2: #121a25;
  --metin: #e8eff7;
  --metin-2: #94a5b7;
  --cizgi: #1d2732;
  --vurgu: #5aa3f0;
  --vurgu-zemin: #10243a;
  --iyi: #4ecb9a;
  --iyi-zemin: #0d2a20;
  --uyari: #e0a960;
  --uyari-zemin: #2b2113;
  --kotu: #f08a8a;
  --kotu-zemin: #2e1616;
  --golge: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

/* `hidden` özelliği her zaman kazanmalı.
   Tarayıcının kendi `[hidden] { display: none }` kuralı en zayıf katmanda;
   `.giris-kap { display: grid }` gibi sıradan bir kural bile onu eziyor ve
   gizlenmesi gereken bölüm ekranda kalıyor. Bu satır olmadan giriş formu
   girişten sonra da duruyor, panel onun altına açılıyor ve görünmüyor. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -.028em; margin: 0; font-weight: 700; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
a { color: var(--vurgu); }

.marka {
  font-weight: 800;
  letter-spacing: -.04em;
  background: var(--metalik);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: kay 14s ease-in-out infinite;
}
@keyframes kay { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .marka { animation: none; } }

/* --- kabuk --- */

.ust {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--yuzey) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--cizgi);
}
.ust .bosluk { flex: 1; }

.kap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }

/* --- düğmeler --- */

button, .dugme {
  font: inherit; font-weight: 600;
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  color: var(--metin);
  padding: 8px 14px;
  border-radius: var(--r-kucuk);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
}
button:hover, .dugme:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* `a.dugme` de birincil olabilmeli: mikro-sitedeki "Hemen ara" bir bağlantı
   (tel:), düğme değil. Yalnızca `button.birincil` yazılırsa o bağlantı
   sıradan beyaz bir kutu olarak kalıyor ve sayfanın ana eylemi kayboluyor. */
button.birincil, .dugme.birincil {
  background: var(--dugme-metalik);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  border-color: #4f8bc7;
  color: #06243f;
}
button.iyi { background: var(--iyi-zemin); color: var(--iyi); border-color: transparent; }
button.kotu { background: var(--kotu-zemin); color: var(--kotu); border-color: transparent; }
button.sade { background: transparent; border-color: transparent; color: var(--metin-2); }

.tema-dugme {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
}

/* --- kart, rozet, giriş --- */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  box-shadow: var(--golge);
  padding: 16px 18px;
}

.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--yuzey-2); color: var(--metin-2);
  border: 1px solid var(--cizgi);
}
.rozet.iyi { background: var(--iyi-zemin); color: var(--iyi); border-color: transparent; }
.rozet.uyari { background: var(--uyari-zemin); color: var(--uyari); border-color: transparent; }
.rozet.kotu { background: var(--kotu-zemin); color: var(--kotu); border-color: transparent; }
.rozet.vurgu { background: var(--vurgu-zemin); color: var(--vurgu); border-color: transparent; }

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  color: var(--metin);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--vurgu) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--vurgu);
}
label { display: block; font-size: .82rem; font-weight: 600; color: var(--metin-2); margin-bottom: 5px; }

.ikincil { color: var(--metin-2); }
.kucuk { font-size: .85rem; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- sekmeler --- */

.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; }
.sekme {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  color: var(--metin-2); font-weight: 600; cursor: pointer;
}
.sekme[aria-selected="true"] {
  background: var(--yuzey); color: var(--metin);
  border-color: var(--cizgi); box-shadow: var(--golge);
}
.sekme .sayi {
  margin-inline-start: 6px; font-size: .78rem;
  padding: 1px 7px; border-radius: 999px;
  background: var(--vurgu-zemin); color: var(--vurgu);
}

/* --- durum --- */

.bos { text-align: center; padding: 56px 20px; color: var(--metin-2); }
.bos .simge { font-size: 2rem; opacity: .5; }

.yukleniyor { display: inline-block; width: 15px; height: 15px;
  border: 2px solid var(--cizgi); border-top-color: var(--vurgu);
  border-radius: 50%; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.bildirim {
  position: fixed; inset-inline: 0; bottom: 22px; z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
}
.bildirim > div {
  background: var(--metin); color: var(--zemin);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 600; box-shadow: var(--golge);
  animation: yuksel .25s ease;
}
@keyframes yuksel { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 640px) {
  .kap { padding: 16px 16px 80px; }
  h1 { font-size: 1.3rem; }
}

/* --- Vitrin & Öne Çıkan Kartları (Apple Tarzı & Modern Görsel Dil) --- */
.vitrin-kart {
  position: relative;
  background: var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--uyari) 35%, var(--cizgi));
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px -6px rgba(154, 96, 8, .12), var(--golge);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), border-color .18s, box-shadow .18s;
  text-decoration: none;
  color: inherit;
}
.vitrin-kart:hover {
  transform: translateY(-3px);
  border-color: var(--uyari);
  box-shadow: 0 12px 28px -8px rgba(154, 96, 8, .2), var(--golge);
}
.vitrin-afis {
  height: 60px;
  background: linear-gradient(135deg, rgba(245, 158, 11, .16), rgba(217, 119, 6, .05));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--uyari) 18%, var(--cizgi));
}
.vitrin-icerik {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.vitrin-icerik h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  line-height: 1.25;
}
.vitrin-aksiyonlar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cizgi);
}
.vitrin-aksiyonlar .dugme, .vitrin-aksiyonlar button {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding: 7px 10px;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.durum-nokta {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
}
.durum-nokta.acik {
  background: var(--iyi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iyi) 25%, transparent);
}
.durum-nokta.kapali { background: var(--kotu); }

.avatar-ikon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 1.35rem; font-weight: 800;
  background: var(--yuzey-2); border: 1px solid var(--cizgi);
  color: var(--vurgu);
  flex-shrink: 0;
}