/* Bütün sayfaların ortak görünümü: temalar, desenler, sayfa iskeleti, alt bilgi ve tema seçici.
   Temayı uygulayan ve seçiciyi kuran kod tema.js içinde. */
/* Koyu tema ziyaret aracının paletiyle aynı: lacivert zemin, altın vurgu.
   Açık temada zemin lacivertin soğuk, açık tonu; altın metinler okunması için koyulaşır. */
:root {
  color-scheme: dark;
  --bg: #1E2A38;
  --surface: #263445;
  --surface-2: #2F4057;
  --text: #F4F7FB;
  --text-2: #D9E1EA;
  --muted: #B4C0CE;
  --accent: #C9A86A;
  --accent-hover: #D6B87E;
  --accent-ink: #C9A86A;
  --on-accent: #1E2A38;
  --margin: clamp(20px, 4vw, 56px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #EDF1F5;
    --surface: #FFFFFF;
    --surface-2: #DAE2EA;
    --text: #1E2A38;
    --text-2: #3D4B5C;
    --muted: #5F6C7B;
    --accent-ink: #85621F;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EDF1F5;
  --surface: #FFFFFF;
  --surface-2: #DAE2EA;
  --text: #1E2A38;
  --text-2: #3D4B5C;
  --muted: #5F6C7B;
  --accent-ink: #85621F;
}
/* Renkli temalar: zemin vurgu renginin açık tonu, kartlar beyaz */
:root[data-theme="nane"] {
  color-scheme: light;
  --bg: #E4F4EE; --surface: #FFFFFF; --surface-2: #CBE8DC;
  --text: #15332A; --text-2: #2D4E44; --muted: #52706A;
  --accent: #5CC9A7; --accent-hover: #78D4B7; --accent-ink: #1C7458; --on-accent: #0F2E25;
}
:root[data-theme="lavanta"] {
  color-scheme: light;
  --bg: #EEEAFA; --surface: #FFFFFF; --surface-2: #DCD3F4;
  --text: #2A2140; --text-2: #453A5F; --muted: #685E83;
  --accent: #AA93EA; --accent-hover: #BBA8EF; --accent-ink: #5D42B5; --on-accent: #21173D;
}
:root[data-theme="pembe"] {
  color-scheme: light;
  --bg: #FCEDF2; --surface: #FFFFFF; --surface-2: #F5D3DE;
  --text: #3A1F2A; --text-2: #593543; --muted: #7D5A67;
  --accent: #F29BB5; --accent-hover: #F5B0C5; --accent-ink: #AE3560; --on-accent: #3A1424;
}
:root[data-theme="gok"] {
  color-scheme: light;
  --bg: #E6F2FC; --surface: #FFFFFF; --surface-2: #CCE2F5;
  --text: #132D44; --text-2: #2C4962; --muted: #536F88;
  --accent: #6DB8EC; --accent-hover: #88C6F0; --accent-ink: #1C6AA3; --on-accent: #0D2A42;
}
:root[data-theme="gece"] {
  color-scheme: dark;
  --bg: #221A32; --surface: #2D2342; --surface-2: #3A2E54;
  --text: #F6F1FF; --text-2: #DED4F1; --muted: #B6AACD;
  --accent: #E9A8D5; --accent-hover: #EFBCE0; --accent-ink: #E9A8D5; --on-accent: #2A1630;
}
/* İsteğe bağlı desenler: her temanın kendi deseni, alttaki "Desen" düğmesiyle açılır */
:root {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23C9A86A' fill-opacity='.28'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%2385621F' fill-opacity='.3'/%3E%3C/svg%3E");
  }
}
:root[data-theme="light"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%2385621F' fill-opacity='.3'/%3E%3C/svg%3E");
}
:root[data-theme="nane"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='%235CC9A7' fill-opacity='.3'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="lavanta"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23AA93EA' fill-opacity='.35'%3E%3Cpath d='M14 4l2 8 8 2-8 2-2 8-2-8-8-2 8-2z'/%3E%3Cpath d='M46 38l1.4 5.6 5.6 1.4-5.6 1.4L46 52l-1.4-5.6L39 45l5.6-1.4z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="pembe"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%23F29BB5' fill-opacity='.35'%3E%3Cpath d='M16 26s-9-5.6-9-11.8A5 5 0 0 1 16 11a5 5 0 0 1 9 3.2C25 20.4 16 26 16 26z'/%3E%3Cpath d='M47 55s-6-3.7-6-7.9A3.3 3.3 0 0 1 47 45a3.3 3.3 0 0 1 6 2.1c0 4.2-6 7.9-6 7.9z'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="gok"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg fill='%236DB8EC' fill-opacity='.22'%3E%3Ccircle cx='20' cy='24' r='8'/%3E%3Ccircle cx='31' cy='19' r='10'/%3E%3Ccircle cx='42' cy='25' r='7'/%3E%3Crect x='20' y='24' width='22' height='8' rx='4'/%3E%3Ccircle cx='80' cy='66' r='6'/%3E%3Ccircle cx='89' cy='62' r='8'/%3E%3Ccircle cx='98' cy='67' r='5'/%3E%3Crect x='80' y='66' width='18' height='6' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="gece"] {
  --desen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23F6F1FF' fill-opacity='.45'%3E%3Ccircle cx='10' cy='14' r='1.2'/%3E%3Ccircle cx='62' cy='8' r='.9'/%3E%3Ccircle cx='38' cy='52' r='1.1'/%3E%3Ccircle cx='80' cy='70' r='1.3'/%3E%3Ccircle cx='18' cy='78' r='.8'/%3E%3C/g%3E%3Cpath d='M70 28l1.2 4.8 4.8 1.2-4.8 1.2L70 40l-1.2-4.8L64 34l4.8-1.2z' fill='%23E9A8D5' fill-opacity='.5'/%3E%3C/svg%3E");
}
[data-desen] body { background-image: var(--desen); background-attachment: fixed; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  border-top: 6px solid var(--accent);
}
main, footer {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(12px, 2.5vh, 48px);
  padding-bottom: clamp(8px, 1.5vh, 40px);
}

.secici {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--surface-2);
}
.secici button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.secici button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.secici button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .secici button[aria-pressed="false"]:hover { color: var(--text); }
}

footer {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: var(--muted);
}
/* Ayarlar düğmesi ve paneli: tema, desen, bildirimler (ayarlar.js kurar) */
.ayarlar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--surface-2);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.ayarlar-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Telefonda yalnızca simge */
@media (max-width: 760px) {
  .ayarlar-btn { padding: 0 11px; }
  .ayarlar-btn span { display: none; }
}
.ayarlar-btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ayarlar-btn:hover { background: var(--surface-2); }
}
.ayarlar {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 64px var(--margin) auto auto;
  padding: 20px 22px 22px;
  border: 1px solid var(--surface-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
.ayarlar::backdrop { background: rgba(10, 15, 25, 0.35); }
.ayarlar[open] { animation: panel-ac 200ms var(--ease-out); }
@keyframes panel-ac { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.ayarlar-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ayarlar-bas h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; }
.kapat {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.kapat svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.kapat:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .kapat:hover { background: var(--surface-2); color: var(--text); }
}
.ayar-bolum { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--surface-2); }
.ayar-bolum h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ayar-satir { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.ayar-satir b { display: block; font-size: 0.95rem; font-weight: 700; }
.ayar-satir small { display: block; margin-top: 2px; font-size: 0.82rem; line-height: 1.4; color: var(--text-2); }
.ayar-mesaj { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg); color: var(--text-2); font-size: 0.85rem; line-height: 1.45; }
.ayar-mesaj[hidden] { display: none; }
.ayar-not { font-size: 0.82rem; line-height: 1.45; color: var(--text-2); }
.adres-satir { display: flex; gap: 6px; margin: 10px 0 12px; }
.adres-satir input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--surface-2);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.adres-satir input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.kopyala {
  min-width: 92px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.kopyala:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .kopyala:hover { background: var(--accent-hover); }
}
.adimlar { margin: 6px 0 0 1.2em; display: grid; gap: 4px; font-size: 0.84rem; line-height: 1.4; color: var(--text-2); }
/* Aç/kapa anahtarı */
.anahtar {
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.anahtar::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 200ms var(--ease-out);
}
.anahtar[aria-checked="true"] { background: var(--accent); }
.anahtar[aria-checked="true"]::after { transform: translateX(18px); }
.anahtar:disabled { opacity: 0.5; cursor: default; }
.anahtar:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ayarlar[open] { animation-name: fade; }
  .anahtar::after { transition: none; }
}
.tema-sec { display: flex; gap: 6px; flex-wrap: wrap; }
/* Her yuvarlak temanın zeminini ve vurgu rengini yarı yarıya gösterir */
.tema-sec button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--surface-2);
  background: linear-gradient(135deg, var(--z) 50%, var(--v) 50%);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.tema-sec button[aria-pressed="true"] { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.tema-sec button:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.tema-sec button:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .tema-sec button:hover { transform: scale(1.08); }
}

@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes fade { from { opacity: 0; } }

/* Ekranda görünmeyen ama ekran okuyucuların okuduğu metin */
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }