/* Gelinlik Takip. Stil: pastel-consumer (seed 415400288). Büyük yumuşak köşeler, beyaz kartlar, küçük açık renkli işaretler.
   Yüz: kişilerin kendi renkli baş harfleri ve ürünün yol çizgisi. Vurgu markadan değil, koyu yeşil (Stüdyo'daki beğenilen aile).
   Sapma: dar ikon şeridi yerine yazılı yan menü, çünkü kullanım kolaylığı istendi.
   Izgara: tuval 1040px; detayda 1fr + 340px, boşluk 20: 680 + 20 + 340 = 1040. */
@font-face { font-family: "Manrope"; src: url("vendor/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("vendor/manrope-latin-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #f3f5f2; --surface: #ffffff; --raised: #f5f7f4; --border: #e6e8e4; --rule: #eef0ec; --control: #d6dad4;
  --text: #1b1f1c; --muted: #5a615c;
  --accent: #1f5c43; --accent-hover: #174a35; --accent-soft: #e2f1e8; --accent-ink: #123d2b;
  --negative: #b81f2b; --negative-soft: #fdecea; --negative-ink: #7c1a20;
  --warning-soft: #fff4dc; --warning-ink: #7a4a06;
  --neutral-soft: #edf0ec; --neutral-ink: #3b423d;
  --radius-card: 20px; --radius-ic: 14px; --radius-control: 12px;
  --gap: 20px; --pad: 28px;
  --fs-title: 28px; --fs-section: 20px; --fs-kpi: 32px; --fs-body: 16px; --fs-small: 14px;
  --font: "Manrope", Inter, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 500 var(--fs-body)/24px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.soluk { color: var(--muted); }

/* Uygulama gibi davranır: başlık, menü, sekme ve etiketler seçilmez, fare ok kalır.
   Kopyalanması işe yarayan bilgiler (telefon, ürün, not, eleman ID) ile yazı alanları seçilebilir kalır. */
body { cursor: default; user-select: none; -webkit-user-select: none; }
input, textarea, .kart-alt, .satir-alt, .bilgi-satir strong { user-select: text; -webkit-user-select: text; }
.kart-alt, .satir-alt, .bilgi-satir strong { cursor: text; }
a .satir-alt, a.satir-alt { cursor: pointer; }

/* Kabuk */
.uygulama { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100svh; }
.yan { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; background: var(--surface); overflow: auto; }
/* Logolar koyu zemin üzerine: kutu logonun kendi zeminiyle aynı renk */
.logo-kutu { display: flex; align-items: center; justify-content: center; height: 88px; padding: 8px 14px; border-radius: var(--radius-ic); background: #000; overflow: hidden; }
.logo-kutu.hiss { background: #010101; }
.logo-kutu.ergenler { background: #242320; }
.logo-kutu img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.yan nav { display: grid; gap: 4px; margin-top: 24px; }
.nav { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: var(--radius-ic); color: var(--muted); font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.nav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav:hover { background: var(--raised); color: var(--text); }
.nav[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.yan-alt { margin-top: auto; }
.hesap-dugme { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 6px 8px; border: 0; border-radius: var(--radius-ic); background: none; text-align: left; font-weight: 600; cursor: pointer; }
.hesap-dugme:hover { background: var(--raised); }
.tuval { min-width: 0; padding: 32px var(--pad) 56px; }
.ic { max-width: 1040px; margin: 0 auto; display: grid; gap: var(--gap); }
.alt-bar, .ust-bar { display: none; }
.demo-not { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--warning-soft); color: var(--warning-ink); font-size: 13px; line-height: 20px; font-weight: 600; }

/* Başlık */
.baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.baslik h1 { font-size: var(--fs-title); line-height: 36px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.baslik .alt { margin-top: 2px; color: var(--muted); }
.baslik-sag { flex: none; }

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--neutral-soft); color: var(--neutral-ink); font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease; }
.dugme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dugme:hover { background: #e2e6e1; }
.dugme:active { transform: scale(0.97); }
.dugme[disabled] { opacity: 0.6; cursor: default; }
.dugme.ana { background: var(--accent); color: #fff; }
.dugme.ana:hover { background: var(--accent-hover); }
.dugme.yumusak { background: var(--accent-soft); color: var(--accent-ink); }
.dugme.yumusak:hover { background: #d2e9db; }
.dugme.tehlike { background: var(--negative-soft); color: var(--negative-ink); }
.metin-dugme { min-height: 40px; padding: 0 6px; border: 0; background: none; color: var(--accent); font-weight: 700; font-size: 15px; cursor: pointer; border-radius: 10px; }
.metin-dugme:hover { background: var(--raised); }
.metin-dugme.tehlike { color: var(--negative); }

/* Kişi ve firma işaretleri */
.avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 16px; font-weight: 700; }
.avatar.buyuk { width: 64px; height: 64px; font-size: 22px; }
.avatar.kucuk { width: 36px; height: 36px; font-size: 13px; }
.ton-0 { background: #dcf1ff; color: #0a3a80; }
.ton-1 { background: #fde8ef; color: #7d1d44; }
.ton-2 { background: #e2f1e8; color: #123d2b; }
.ton-3 { background: #fff0d6; color: #6e4405; }
.ton-4 { background: #dff5f5; color: #0d4a4f; }
.ton-5 { background: #fbe9df; color: #7a3211; }
.hap { display: inline-flex; flex: none; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral-ink); }
.hap.uyari { background: var(--warning-soft); color: var(--warning-ink); }
.hap.olumsuz { background: var(--negative-soft); color: var(--negative-ink); }
.hap.olumlu, .hap.vurgu { background: var(--accent-soft); color: var(--accent-ink); }
.hap.viktorya { background: #dcf1ff; color: #0a3a80; }
.hap.hiss { background: #fff0d6; color: #6e4405; }
.hap.ergenler { background: #fde8ef; color: #7d1d44; }

/* Süzgeç hapları */
.secim { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.secim button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 600; font-size: 15px; cursor: pointer; }
.secim button[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Geciken işler */
.geciken-kutu { border-radius: var(--radius-card); background: var(--negative-soft); }
.geciken-ac { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 60px; padding: 10px 20px; border: 0; border-radius: var(--radius-card); background: none; color: var(--negative-ink); font-weight: 700; text-align: left; cursor: pointer; }
.geciken-ac svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms ease; }
.geciken-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.geciken-kutu .satirlar { padding: 0 12px 12px; }

/* 7 gün: günler dokunulabilir */
.serit { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gun { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; padding: 10px 2px; border: 0; border-radius: 18px; background: var(--surface); color: var(--text); cursor: pointer; transition: background-color 150ms ease; }
.gun .ad { color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 600; }
.gun .tarih { font-size: 20px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gun .sayi { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; line-height: 20px; font-weight: 700; color: var(--muted); }
.gun.dolu .sayi { background: var(--accent-soft); color: var(--accent-ink); }
.gun[aria-pressed="true"] { background: var(--accent); color: #fff; }
.gun[aria-pressed="true"] .ad { color: #fff; }
.gun[aria-pressed="true"] .sayi { background: #fff; color: var(--accent-ink); }

/* Teslimat, Prova, İade sekmesi */
.sekmeler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: #e6e9e4; }
.sekmeler button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 700; font-size: 15px; cursor: pointer; }
.sekmeler button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.sekmeler .sayi { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.sekmeler .sayi.acil { color: var(--negative); font-weight: 800; }
.liste-baslik.acil { color: var(--negative); }

/* Bu hafta / Aylık takvim seçimi */
.gorunum-satir { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gorunum-sec { display: flex; gap: 4px; }
.gorunum-sec a { display: flex; align-items: center; min-height: 40px; padding: 0 2px; margin-right: 16px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 700; font-size: 16px; }
.gorunum-sec a:hover { color: var(--text); }
.gorunum-sec a[aria-current="page"] { border-color: var(--accent); color: var(--text); }

/* Aylık takvim. Masaüstünde takvim 420px + liste; 1040 = 420 + 20 + 600 */
.ay-duzen { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--gap); align-items: start; }
.takvim { display: grid; gap: 14px; }
.ay-secici { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ay-secici select { width: auto; flex: 1 1 96px; min-height: 44px; padding: 8px 10px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.yuvarlak { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--neutral-soft); color: var(--neutral-ink); cursor: pointer; }
.yuvarlak:hover { background: #e2e6e1; }
.yuvarlak svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ay-duzen .liste { scroll-margin-top: 80px; }
.ay-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ay-gun-adi { padding-bottom: 2px; color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; }
.ay-gun { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 2px 0; border: 0; border-radius: var(--radius-ic); background: none; color: var(--text); cursor: pointer; transition: background-color 150ms ease; }
.ay-gun:hover { background: var(--raised); }
.ay-gun .tarih { font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ay-gun .sayi { min-width: 20px; height: 18px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; }
.ay-gun.dolu { background: var(--accent-soft); }
.ay-gun.dolu .sayi { color: var(--accent-ink); }
.ay-gun.bugun .tarih { color: var(--accent); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.ay-gun[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ay-gun[aria-pressed="true"] .tarih, .ay-gun[aria-pressed="true"] .sayi { color: #fff; }

/* Günlük */
.gunluk-yaz { display: grid; gap: 10px; }
.gunluk-yaz label { font-size: 14px; line-height: 20px; font-weight: 700; }
.gunluk-alt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gunluk-alt input { width: auto; flex: 0 1 190px; }
.gunluk-not { display: grid; justify-items: start; gap: 4px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); }
.gunluk-suz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gunluk-suz select, .gunluk-suz input[type="date"] { width: auto; flex: 1 1 150px; background: var(--surface); }
.gunluk-yazar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.gunluk-yazar strong { font-weight: 700; }
.gunluk-metin { width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; user-select: text; -webkit-user-select: text; }
.gunluk-not .metin-dugme { justify-self: end; }

/* Özel sipariş */
.ozel-alan { display: grid; gap: 12px; justify-items: stretch; }
.ozel-alan > .metin-dugme { justify-self: end; }
.ozel-eylem { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.alt-bolum .ozel-eylem { margin-top: 10px; }
.alt-bolum .kart-etiket { margin-top: 6px; }
.alt-bolum p.satir-alt { margin-top: 6px; }

/* Yönetici özeti. 3 kart: (1040 - 2×20) / 3 */
.ozet-ust { display: grid; gap: 16px; }
.ozet-ust .ay-secici { max-width: 420px; }
.ozet-toplam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ozet-toplam dt { color: var(--muted); font-size: 14px; line-height: 20px; }
.ozet-toplam dd { font-size: 24px; line-height: 32px; font-weight: 600; }
.ozet-toplam .ana-sayi dd { font-size: var(--fs-kpi); line-height: 40px; font-weight: 700; }
.ozet-toplam > div { align-self: end; }
.ozet-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.ozet-kart { display: grid; gap: 8px; }
.ozet-kart > header { margin-bottom: 0; }
.ozet-kart h3 { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 600; }
.ozet-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 30px; }
.ozet-satir dd { font-weight: 700; }
.ozet-kart .dugme { margin-top: 8px; }

/* Değişiklik geçmişi */
.gecmis { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; }
.gecmis + .gecmis { border-top: 1px solid var(--rule); }
.gecmis-is { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; line-height: 22px; }
.gecmis-zaman { color: var(--muted); font-size: 13px; line-height: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gecmis .satir-alt a { color: var(--accent); font-weight: 600; }
.gecmis .satir-alt strong { color: var(--text); font-weight: 700; }

/* İş kartları */
.satirlar { display: grid; gap: 4px; }
.kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.geciken-kutu .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kartlar.tek { grid-template-columns: minmax(0, 1fr); }
.kart { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); transition: transform 120ms ease; }
.kart-ad { font-weight: 700; font-size: 17px; line-height: 24px; overflow-wrap: anywhere; }
.kart-ad a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.kart-ad a:focus-visible { outline: none; }
.kart-ad a:focus-visible::after { outline: 3px solid var(--accent); outline-offset: -3px; }
.kart-alt { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.kart-etiket { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kart-eylem { position: relative; grid-column: 1 / -1; display: grid; }
.ok { flex: none; width: 20px; height: 20px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kart.basit { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }

.bos { padding: 28px 20px; border-radius: var(--radius-card); background: var(--surface); color: var(--muted); text-align: center; }

/* Panel */
.panel { background: var(--surface); border-radius: var(--radius-card); padding: 20px; min-width: 0; }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.panel h2 { font-size: var(--fs-section); line-height: 28px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.panel h2 .sayi { margin-left: 4px; color: var(--muted); font-weight: 500; }
.satir { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; }
.satir + .satir { border-top: 1px solid var(--rule); }
.satir-ad { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; overflow-wrap: anywhere; }
.satir-ad a:hover { text-decoration: underline; text-underline-offset: 3px; }
.satir-alt { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.satir-sag { display: flex; align-items: center; gap: 6px; }
.geciken-yazi { color: var(--negative); font-weight: 700; }

/* Arama */
.arama-kutu { position: relative; }
.arama-kutu svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.arama-kutu input[type="search"] { min-height: 54px; padding-left: 48px; border: 0; border-radius: 999px; background: var(--surface); }

/* Müşteri detayı */
.geri { display: inline-flex; justify-self: start; align-items: center; gap: 4px; min-height: 36px; color: var(--muted); font-weight: 600; }
.geri svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.detay { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.detay .bilgi-panel { position: sticky; top: 32px; order: 2; display: grid; gap: 16px; }
.kisi { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kisi h1 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.kalan { padding: 14px 16px; border-radius: var(--radius-ic); background: var(--accent-soft); color: var(--accent-ink); }
.kalan strong { display: block; font-size: var(--fs-kpi); line-height: 40px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kalan span { font-size: 14px; line-height: 20px; }
.bilgi-satir { color: var(--muted); font-size: 14px; line-height: 20px; }
.bilgi-satir strong { display: block; color: var(--text); font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.iletisim { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.iletisim .dugme { padding: 0 10px; }
.sutun { display: grid; gap: var(--gap); min-width: 0; }
.urun { display: grid; gap: 16px; }
.urun-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* Ürünün yol çizgisi */
.yol { display: flex; align-items: flex-start; }
.yol li { position: relative; flex: 1; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--muted); font-size: 13px; line-height: 18px; font-weight: 600; }
.yol li::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 3px; background: var(--rule); }
.yol li:first-child::before { display: none; }
.yol li.tamam::before, .yol li.simdi::before { background: var(--accent); }
.yol .nokta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rule); }
.yol .nokta svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.yol li.tamam { color: var(--accent-ink); }
.yol li.tamam .nokta { background: var(--accent); }
.yol li.simdi { color: var(--text); font-weight: 700; }
.yol li.simdi .nokta { background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent); }

.urun-tarih { display: flex; flex-wrap: wrap; gap: 8px; }
.urun-eylem { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.urun-eylem .dugme.ana { flex: 1; min-width: 180px; }
.alt-bolum { padding: 14px 16px; border-radius: var(--radius-ic); background: var(--raised); }
.alt-bolum-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.alt-bolum h3 { font-size: 16px; line-height: 24px; font-weight: 700; }
.alt-bolum .satir { padding: 10px 0; }
.alt-bolum .satir + .satir { border-color: var(--border); }
.alt-bolum > .satir-alt { margin-top: 0; }
.fotolar { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.foto { aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-ic); background: var(--neutral-soft); cursor: zoom-in; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.dosya-sec { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Terzi */
.terzi-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.terzi-baslik { display: flex; align-items: center; gap: 12px; }
.terzi-baslik > div { flex: 1; min-width: 0; }

/* Pencereler: telefonda alttan açılan */
dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px rgba(20, 30, 24, 0.25); }
dialog::backdrop { background: rgba(20, 30, 24, 0.45); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 24px; }
.form > * { grid-column: 1 / -1; }
.form > .yarim { grid-column: auto; }
.form > .yarim:has(+ [hidden]) { grid-column: 1 / -1; }
.liste { display: grid; gap: 12px; }
.liste-baslik { font-size: var(--fs-section); line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.kart-eylem.ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kart-eylem.ikili .dugme { padding: 0 8px; font-size: 14px; }
.hesap-kisi strong + span { display: block; }
.form h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.form p { color: var(--muted); }
.alan { display: grid; gap: 6px; min-width: 0; align-content: start; }
.alan label, .alan legend, .giris .alan label { padding: 0; font-size: 14px; line-height: 20px; font-weight: 700; }
fieldset { margin: 0; padding: 0; border: 0; }
.alan legend { margin-bottom: 6px; }
.alan .ipucu { color: var(--muted); font-size: 13px; line-height: 18px; }
input[type="text"], input[type="tel"], input[type="date"], input[type="time"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1.500px solid transparent; border-radius: var(--radius-control); background: var(--neutral-soft); font-size: 16px; line-height: 22px; font-weight: 500; transition: background-color 150ms ease, border-color 150ms ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 76px; resize: vertical; }
.tercih { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--neutral-soft); border-radius: 999px; }
.tercih label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tercih input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tercih label:has(input:checked) { background: var(--accent); color: #fff; font-weight: 700; }
.tercih label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.form .form-hata, .form-hata { padding: 10px 14px; border-radius: var(--radius-control); background: var(--negative-soft); color: var(--negative-ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.form-alt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.form-alt .sil { margin-right: auto; }
.form-alt .dugme.ana { min-width: 140px; }
.buyuk-foto { display: grid; gap: 12px; padding: 12px; }
.buyuk-foto img { width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; border-radius: var(--radius-ic); }
.hesap-kisi { display: flex; align-items: center; gap: 14px; }
.hesap-kisi strong { display: block; font-size: 18px; line-height: 26px; font-weight: 700; }

/* Giriş */
.giris { display: grid; min-height: 100svh; place-items: center; padding: 16px; }
.giris-kutu { display: grid; gap: 24px; width: min(420px, 100%); }
.giris-marka { display: grid; justify-items: center; gap: 12px; text-align: center; }
.giris-logolar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.giris-logolar .logo-kutu { height: 64px; padding: 6px 8px; }
.giris-marka h1 { font-size: var(--fs-title); line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.giris-marka p { color: var(--muted); }
.giris .panel { display: grid; gap: 16px; padding: 24px; border-radius: 24px; }
.giris .dugme { min-height: 52px; font-size: 16px; }
.giris .demo-not { justify-self: stretch; padding: 10px 14px; border-radius: var(--radius-control); }

/* Yükleniyor ve bildirim */
.dolgu { display: block; height: 18px; margin: 10px 0; background: var(--neutral-soft); border-radius: 999px; }
.dolgu.genis { width: 70%; }
.dolgu.dar { width: 40%; }
#bildirim { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.tost { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 18px; border-radius: 18px; background: var(--text); color: #fff; font-size: 15px; line-height: 20px; font-weight: 600; box-shadow: 0 10px 30px rgba(20, 30, 24, 0.28); pointer-events: auto; }
.tost.hata { background: var(--negative-ink); }
.tost button { flex: none; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; cursor: pointer; }

/* Tablet ve telefon: alt menü */
@media (max-width: 1000px) {
  .uygulama { display: block; }
  .yan { display: none; }
  .ust-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 16px; background: var(--ground); }
  .ust-bar .logo-kutu { width: 124px; height: 54px; padding: 3px 8px; border-radius: 12px; }
  .ust-bar .hesap-dugme { width: auto; min-height: 44px; padding: 0; }
  .alt-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -1px 0 var(--border); }
  .alt-bar .nav { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 0; border-radius: 16px; font-size: 12px; line-height: 16px; }
  .alt-bar .nav[aria-current="page"] svg { color: var(--accent); }
  .tuval { padding: 8px 20px calc(100px + env(safe-area-inset-bottom)); }
  #bildirim { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .detay .bilgi-panel { position: static; }
}
@media (max-width: 820px) {
  .detay, .terzi-liste, .ay-duzen, .ozet-izgara { grid-template-columns: minmax(0, 1fr); }
  .ozet-toplam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detay .bilgi-panel { order: 0; }
  .kartlar, .geciken-kutu .kartlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --gap: 16px; --fs-title: 26px; }
  .tuval { padding: 4px 16px calc(100px + env(safe-area-inset-bottom)); }
  .serit { gap: 4px; }
  .gecmis { grid-template-columns: auto minmax(0, 1fr); }
  .gecmis-zaman { grid-column: 2; }
  .baslik { flex-wrap: wrap; }
  .takvim { gap: 8px; padding: 12px; }
  .ay-izgara { gap: 2px; }
  .ay-gun { min-height: 44px; padding: 0; border-radius: 12px; }
  .ay-gun .tarih { font-size: 14px; line-height: 18px; }
  .ay-gun .sayi { height: 14px; font-size: 11px; line-height: 14px; }
  .gorunum-sec a { margin-right: 8px; }
  .gun { min-height: 78px; padding: 8px 0; border-radius: 16px; }
  .gun .ad { font-size: 12px; }
  .gun .tarih { font-size: 18px; line-height: 26px; }
  .panel { padding: 16px; }
  .secim { margin: 0 -16px; padding: 0 16px; }
  .satir-sag .metin-dugme { min-height: 44px; }
  .satir { grid-template-columns: minmax(0, 1fr); }
  .satir-sag { justify-content: space-between; }
  .satir-sag .dugme { flex: 1; }
  dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  dialog::before { content: ""; display: block; width: 44px; height: 5px; margin: 10px auto -8px; border-radius: 999px; background: var(--control); }
  .form { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .form-alt .dugme { flex: 1; min-height: 50px; }
  .form-alt .sil { flex: none; }
  .buyuk-foto .form-alt .dugme { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}