/*
 * Refika tasarım dili (1.0.0) — tablet, tablet ayarları ve aile uygulaması AYNI dili konuşur.
 *
 * "Gün ışığı": ferah BEYAZ zemin, üzerinde logodaki Refika sarısı. Arkada çok hafif,
 * yavaş kayan sarı ışık dalgaları (yapay zekâ / hologram hissi) — dikkat dağıtmaz.
 *   Sarı         → ana vurgu (düğme, hale, seçili)        — logodan ölçüldü: #FEBE04
 *   Kehribar     → sarı üzerindeki/beyaz üzerindeki VURGU YAZISI (sarı yazı beyazda okunmaz)
 *   Turuncu (%10)→ hatırlatma ve küçük ayrıntılar
 *   Metalik gri  → ayırıcı, pasif alan, kart kenarı
 *   Nar          → yalnızca acil durum
 * Eski değişken adları (--firuze, --lacivert …) uyum için korunur; değerleri yeni palettir.
 *
 * Kontrast (WCAG 2.2): mürekkep/beyaz 15.6:1 · mürekkep/sarı 9.6:1 · kehribar/beyaz 6.3:1
 * Sarı zemin üzerine BEYAZ YAZI KONMAZ (1.7:1): sarı düğmede yazı --vurgu-yazi (mürekkep).
 * Yazı tipi: Lexend (okunabilirlik için tasarlandı), uygulamanın içinde gelir.
 */
@import url('fonts.css');

:root {
  /* yeni adlar */
  --gunes: #FEBE04;        /* Refika sarısı (logo) */
  --gunes-parlak: #FFD23F;
  --gunes-acik: #FFE08A;
  --gunes-sis: #FFF6D6;
  --kehribar: #8A5A00;     /* beyaz/sarı-sis üzerinde vurgu yazısı */
  --turuncu: #F28C18;      /* %10 destek rengi */
  --turuncu-koyu: #A85500;
  --metal: #C9CDD3;        /* metalik açık gri */
  --metal-acik: #EEF0F2;
  --murekkep: #4A3510;
  --vurgu-yazi: #4A3510;   /* sarı zemin üzerindeki yazı */

  /* eski adlar → yeni palet */
  --sis: #FFFFFF;          /* zemin */
  --sis-2: #E8EAED;        /* ayırıcı, pasif alan (metalik) */
  --kagit: #FFFFFF;        /* yüzey */
  --lacivert: #4A3510;     /* yazı, koyu şerit */
  --lacivert-2: #4A4436;   /* ikincil yazı */
  --lacivert-3: #6E675A;   /* üçüncül yazı, simgeler (beyazda 5.4:1) */
  --firuze: #FEBE04;       /* vurgu = sarı */
  --firuze-koyu: #8A5A00;  /* vurgu yazısı / koyu zemin (beyaz yazı 6.3:1) */
  --firuze-acik: #FFE08A;  /* hale, ince vurgu */
  --firuze-sis: #FFF6D6;   /* vurgu zemini */
  --kayisi: #F28C18;       /* hatırlatma = turuncu */
  --kayisi-sis: #FFEBD6;
  --kayisi-koyu: #8A4400;
  --nar: #C15F3C;          /* acil */
  --nar-koyu: #9C4A2E;
  --nar-sis: #FBEAE3;
  --serit-yazi: #FFFFFF;   /* koyu şerit üzerindeki yazı */

  /* 16 Ekim 2026 gece: Inter (SF Pro'nun açık lisanslı karşılığı); Lexend yedek */
  --font: 'Inter', 'Lexend', 'Segoe UI', Roboto, system-ui, sans-serif;
  /* Destek tonları (Onur: "sarı-beyaz biraz çiğ; hafif turuncu ve başka tonlarla destekle") */
  --seftali: #FFB27A;
  --seftali-sis: #FFF3E6;
  --turuncu-yazi: #B85F00;  /* beyazda küçük yazı (4,6:1) */
  --sari-turuncu: linear-gradient(180deg, #FFC61A 0%, #FDB208 45%, #F59A0F 100%);
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 28px;
  --golge: 0 1px 2px rgba(42, 36, 22, 0.06), 0 8px 24px rgba(42, 36, 22, 0.07);
  --golge-yuksek: 0 2px 6px rgba(42, 36, 22, 0.08), 0 24px 60px rgba(42, 36, 22, 0.16);
  --gecis: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; color-scheme: only light; } /* madde 105 */

body {
  margin: 0;
  background: var(--sis);
  color: var(--lacivert);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400; /* madde 149: yaşlı gözler için ince (350) yerine normal kalınlık */
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--firuze);
  outline-offset: 3px;
}

/* Tur 45 (26 Ekim, Onur: "tuşlara tıklayınca mavi oluyor, kötü"): Android WebView'ın yarı saydam MAVİ dokunma
   vurgusu her yerde kapalı; dokunma geri bildirimini her ögenin kendi :active stili ve marka renkli odak halkası
   verir. Dokunmayla gelen odakta halka gösterilmez (yalnız klavyeyle gezerken görünür). */
html, body { -webkit-tap-highlight-color: transparent; }
button, a, label, summary, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus:not(:focus-visible), summary:focus:not(:focus-visible), a:focus:not(:focus-visible), label:focus:not(:focus-visible) { outline: none; }

/* Marka işareti: içinde küçük bir "hale" yayı olan daire. Üç yüzde de aynı. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mark svg { width: 1.6em; height: 1.6em; flex: none; }

/* Ortak düğmeler */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--kagit);
  color: var(--lacivert);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
/* Madde 100/112: işlem sürerken (tek-sefer.js aria-busy) düğmede küçük bir dönen halka; soluklaşmaz ki "bozuk" sanılmasın. */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; position: relative; color: transparent !important; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid var(--vurgu-yazi, #3A2E12); border-right-color: transparent; animation: btn-donus 0.8s linear infinite;
}
@keyframes btn-donus { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }
.btn svg { width: 20px; height: 20px; }
.btn-ana { background: var(--firuze); color: var(--vurgu-yazi); }
.btn-ana:hover { background: var(--gunes-parlak); }
.btn-cizgi { border-color: var(--sis-2); background: transparent; }
.btn-cizgi:hover { border-color: var(--lacivert-3); }
.btn-sessiz { background: transparent; color: var(--lacivert-2); padding: 0 12px; }
.btn-sessiz:hover { color: var(--lacivert); }
.btn-tehlike { border-color: var(--nar-sis); background: transparent; color: var(--nar-koyu); } /* madde 122: 6.1:1 (4.2:1 idi) */
.btn-tehlike:hover { background: var(--nar-sis); }

/* Form alanları */
.alan { display: block; margin: 0 0 18px; }
.alan > span:first-child { display: block; font-size: 15px; font-weight: 500; color: var(--lacivert-2); margin-bottom: 8px; }
.girdi, .alan input, .alan select, .alan textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--sis-2);
  border-radius: var(--r-m);
  background: var(--kagit);
  font-size: 17px;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan select, select.girdi {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  cursor: pointer;
}
.alan textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.girdi:focus, .alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none;
  border-color: var(--firuze);
  box-shadow: 0 0 0 4px var(--firuze-sis);
}
.alan input[aria-invalid="true"] { border-color: var(--nar); box-shadow: 0 0 0 4px var(--nar-sis); }
.alan small { display: block; color: var(--lacivert-3); font-size: 14px; margin-top: 6px; line-height: 1.45; }

/* Açma/kapama anahtarı */
.anahtar { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; margin: 0 0 18px; }
.anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtar .kol {
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: var(--sis-2);
  transition: background var(--gecis);
  margin-top: 2px;
}
.anahtar .kol::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(42, 36, 22, 0.25);
  transition: transform var(--gecis);
}
.anahtar input:checked + .kol { background: var(--firuze); }
.anahtar input:checked + .kol::after { transform: translateX(20px); }
.anahtar input:focus-visible + .kol { outline: 3px solid var(--firuze); outline-offset: 3px; }
.anahtar b { display: block; font-weight: 500; }
.anahtar small { display: block; color: var(--lacivert-3); font-size: 14px; margin-top: 4px; line-height: 1.45; }

/* Seçenek grubu (segment) */
.secim { display: flex; flex-wrap: wrap; gap: 8px; }
.secim label { position: relative; }
.secim input { position: absolute; opacity: 0; }
.secim span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--sis-2);
  background: var(--kagit);
  cursor: pointer;
  transition: all var(--gecis);
  font-size: 16px;
}
.secim.coklu input:checked + span, .secim input:checked + span { background: var(--lacivert); border-color: var(--lacivert); color: var(--serit-yazi); }
.secim input:focus-visible + span { outline: 3px solid var(--firuze); outline-offset: 2px; }

.hata { color: var(--nar-koyu); font-weight: 500; min-height: 1.4em; margin: 8px 0 0; font-size: 15px; }
.tamam-yazi { color: var(--firuze-koyu); }

/* PIN tuş takımı (Ayarlar ve Kurulum) */
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 30px 0 4px; min-height: 20px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--lacivert-3); transition: all var(--gecis); }
.pin-dots i.full { background: var(--lacivert); border-color: var(--lacivert); transform: scale(1.1); }
.pin-dots.salla { animation: salla 0.4s; }
@keyframes salla { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

.keypad { display: grid; justify-content: center; grid-template-columns: repeat(3, 84px); gap: 18px 26px; margin: 10px auto 18px; }
.keypad button {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--kagit);
  box-shadow: var(--golge);
  font-size: 30px;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--gecis), transform var(--gecis);
}
.keypad button:active { background: var(--firuze-sis); transform: scale(0.95); }
.keypad button.metin { background: transparent; box-shadow: none; font-size: 17px; color: var(--lacivert-2); }
.keypad button.onay { background: var(--firuze); color: var(--vurgu-yazi); font-size: 17px; font-weight: 500; }
.keypad.busy { opacity: 0.5; pointer-events: none; }

/* Tur 45 (Onur: "ölçülendirme kötü, ekrana tam otursa"): tablet yatayında görünür yükseklik dar (DPI ölçeğiyle
   ~540 CSS px) — PIN tuş takımı ve noktalar küçülerek EKRANA TAM SIĞAR; alt sıra (Sil · 0 · Tamam) kesilmez. */
@media (max-height: 680px) {
  .pin-dots { margin: 12px 0 2px; }
  .keypad { grid-template-columns: repeat(3, 64px); gap: 10px 22px; margin: 8px auto 10px; }
  .keypad button { width: 64px; height: 64px; font-size: 24px; }
  .keypad button.metin, .keypad button.onay { font-size: 15px; }
}


/* Ses seçimi */
.sesler { display: grid; gap: 10px; }
.ses {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  background: var(--kagit);
  border-radius: var(--r-m);
  border: 1.5px solid transparent;
  box-shadow: var(--golge);
  cursor: pointer;
  transition: border-color var(--gecis);
}
.ses:has(input:checked) { border-color: var(--firuze); }
.ses input { width: 22px; height: 22px; accent-color: var(--firuze); flex: none; }
.ses-ad { flex: 1; min-width: 0; }
.ses-ad b { display: block; font-weight: 500; }
.ses-ad small { color: var(--lacivert-3); font-size: 14px; }
.ses .btn { min-height: 44px; padding: 0 16px; }
.ses-yok { color: var(--lacivert-2); background: var(--kagit); padding: 16px; border-radius: var(--r-m); }


.ses-baslik { margin: 14px 0 2px; font-size: 14px; font-weight: 500; color: var(--lacivert-3); }
.ses-baslik:first-child { margin-top: 0; }
.ses-not { margin: 6px 2px 0; font-size: 14px; color: var(--lacivert-3); }

/* İlaç düzenleyici (aile uygulaması ve tablet ayarları) */
.ilaclar { display: grid; gap: 10px; }
.ilac { background: var(--kagit); border-radius: var(--r-m); box-shadow: var(--golge); overflow: hidden; }
.ilac-bas { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: none; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ilac-durum { width: 12px; height: 12px; border-radius: 50%; background: var(--firuze); box-shadow: 0 0 0 4px var(--firuze-sis); flex: none; }
.ilac-durum.kapali { background: var(--lacivert-3); box-shadow: none; }
.ilac-ad { flex: 1; min-width: 0; }
.ilac-ad b { display: block; font-weight: 500; font-size: 17px; }
.ilac-ad small { display: block; color: var(--lacivert-3); font-size: 14px; margin-top: 2px; }
.ilac-ok { width: 10px; height: 10px; border-right: 2px solid var(--lacivert-3); border-bottom: 2px solid var(--lacivert-3); transform: rotate(45deg); transition: transform var(--gecis); margin-right: 6px; }
.ilac.acik .ilac-ok { transform: rotate(-135deg); }
.ilac-govde { padding: 4px 18px 18px; border-top: 1px solid var(--sis-2); }
.ilac-govde .alan { margin-top: 16px; margin-bottom: 0; }
.ilac-govde .ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.ilac-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.ilac-alt .anahtar { margin: 0; }
.ilac-bos { margin: 0; padding: 18px 20px; border-radius: var(--r-m); background: var(--kagit); color: var(--lacivert-2); }
.saatler, .gunler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.saat-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--lacivert); color: var(--serit-yazi); font-variant-numeric: tabular-nums; font-size: 17px; }
.saat-cip button { position: relative; width: 36px; height: 36px; margin: 4px 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: inherit; cursor: pointer; font-size: 18px; line-height: 1; }
.saat-ekle { width: 140px !important; min-height: 44px !important; padding: 6px 12px !important; }
.saat-oneri, .gun-cip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed var(--sis-2); background: transparent; color: var(--lacivert-2); cursor: pointer; font: inherit; font-size: 15px; }
.gun-cip { border-style: solid; }
.gun-cip.secili { background: var(--firuze); border-color: var(--firuze); color: var(--vurgu-yazi); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ================================================================ 1.0.0 GÜN IŞIĞI
   Bütün sayfalar: ferah beyaz zemin + arkada çok hafif, yavaş kayan sarı ışık ve ince
   "hologram" dalgaları. Yazının arkasında kontrast düşmesin diye ışık yoğunluğu düşük tutulur;
   hareket yavaştır (38 sn) ve "hareketi azalt" ayarında durur. */
html { background: #FFFFFF; }
body { background: transparent !important; }
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  inset: -18vmax;
  background:
    radial-gradient(38vmax 26vmax at 16% 14%, rgba(254, 190, 4, 0.17), rgba(254, 190, 4, 0) 70%),
    radial-gradient(34vmax 28vmax at 88% 18%, rgba(255, 224, 138, 0.26), rgba(255, 224, 138, 0) 70%),
    radial-gradient(42vmax 24vmax at 72% 94%, rgba(242, 140, 24, 0.08), rgba(242, 140, 24, 0) 70%),
    radial-gradient(30vmax 30vmax at 8% 86%, rgba(201, 205, 211, 0.30), rgba(201, 205, 211, 0) 70%);
  animation: holo-isik 38s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 46vh;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='400' viewBox='0 0 1600 400' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 250 C200 190 400 310 600 250 S1000 190 1200 250 S1500 300 1600 250' stroke='%23FEBE04' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M0 285 C220 235 420 335 640 285 S1040 225 1260 285 S1500 320 1600 285' stroke='%23FFD23F' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cpath d='M0 320 C180 290 380 360 580 320 S980 280 1180 320 S1480 350 1600 320' stroke='%23C9CDD3' stroke-opacity='.6' stroke-width='1'/%3E%3Cpath d='M0 215 C240 175 460 265 700 215 S1100 165 1340 215 S1520 245 1600 215' stroke='%23F28C18' stroke-opacity='.18' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 1600px 100%;
  background-position: 0 100%;
  animation: holo-dalga 60s linear infinite;
  mask-image: linear-gradient(180deg, transparent, #000 45%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 45%);
}
@keyframes holo-isik {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(3vmax, -2vmax, 0) rotate(5deg) scale(1.05); }
}
@keyframes holo-dalga { to { background-position: -1600px 100%; } }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* Logo (her sayfanın başlığında) */
.mark-logo { width: 1.75em; height: 1.75em; flex: none; display: block; border-radius: 28%; box-shadow: 0 2px 8px rgba(254, 190, 4, 0.35); }

/* Sarı üzerindeki yazı ve simgeler koyu (beyaz yazı sarıda okunmaz) */
.btn-ana { color: var(--vurgu-yazi); box-shadow: 0 6px 18px rgba(254, 190, 4, 0.35); }
.btn-ana:hover { background: var(--gunes-parlak); }
.btn-ana:focus-visible, .btn:focus-visible { outline-color: var(--kehribar); }
:focus-visible { outline-color: var(--kehribar); }
.secim.coklu input:checked + span, .secim input:checked + span { background: var(--gunes); border-color: var(--gunes); color: var(--vurgu-yazi); }
.saat-cip { background: var(--gunes); color: var(--vurgu-yazi); }
.saat-cip button { background: rgba(42, 36, 22, 0.12); }
/* Madde 95: görünür daire 36 px, dokunma alanı 44 px (görünmez kenar). */
.saat-cip button::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.pin-dots i.full { background: var(--gunes); border-color: var(--kehribar); }
.girdi:focus, .alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--gunes); box-shadow: 0 0 0 4px var(--gunes-sis); }
/* Metalik ince kenar: kartlar beyaz zeminde kaybolmasın */
.ilac, .ses, .keypad button:not(.metin) { border: 1px solid var(--metal-acik); }
.tamam-yazi { color: var(--kehribar); }

/* ================================================================ 1.0.1 ALTIN — Onur'un paleti
 * %80-90: BEYAZ + logodaki SARI (#FEBE04). %10-20: Claude TURUNCUSU (#D97757) ve METALİK AÇIK GRİ.
 * Siyah yok: yazı koyu altın-kahve (#4A3510, beyazda 11.6:1), başlıklar ALTIN (#9A6200, 5.1:1)
 * — "beyaz üzerine sarı". "Sarı üzerine beyaz": sarıdan koyu altına (#B87A00) inen bantlarda YALNIZCA
 * BÜYÜK yazı (≥24px kalın; 3.6:1). Küçük yazı düz sarı üzerine beyaz KONMAZ (1.7:1, yaşlı okuyamaz).
 * Kırmızı yok: 112 ve acil Claude turuncusu (#D97757 → #C15F3C, beyaz yazı 4.2:1).
 */
:root {
  --murekkep: #4A3510;
  --vurgu-yazi: #4A3510;
  --lacivert: #4A3510;
  --lacivert-2: #6B5320;
  --lacivert-3: #7A6230;
  --kehribar: #9A6200;
  --firuze-koyu: #9A6200;
  --baslik: #9A6200;
  --altin-koyu: #B87A00;
  --altin-bant: linear-gradient(160deg, #FFC72C 0%, #FEBE04 38%, #E9A200 72%, #B87A00 100%);
  --turuncu: #D97757;
  --turuncu-koyu: #B4532F;
  --kayisi: #D97757;
  --kayisi-sis: #FBEAE3;
  --kayisi-koyu: #A8492A;
  --nar: #C15F3C;
  --nar-koyu: #9C4A2E;
  --nar-sis: #FBEAE3;
  --acil-bant: linear-gradient(160deg, #E08A6D 0%, #D97757 45%, #C15F3C 100%);
  --metal-cizgi: linear-gradient(90deg, #F4F5F7, #D9DCE1 50%, #F4F5F7);
  --golge: 0 1px 2px rgba(122, 82, 0, 0.06), 0 8px 24px rgba(122, 82, 0, 0.08);
  --golge-yuksek: 0 2px 6px rgba(122, 82, 0, 0.08), 0 24px 60px rgba(122, 82, 0, 0.16);
}
body { color: var(--murekkep); }
/* Başlıklar altın; düşük öncelik (:where) — renkli bantlardaki başlıklar kendi rengini korur. */
:where(h1, h2) { color: var(--baslik); }

/* Logo her sayfada büyük ve net (eskiden 1.75em ≈ 35px). */
.mark { font-size: 24px; font-weight: 700; color: var(--murekkep); gap: 12px; }
.mark-logo { width: 2.3em; height: 2.3em; border-radius: 26%; box-shadow: 0 4px 14px rgba(254, 190, 4, 0.45), 0 0 0 1px rgba(184, 122, 0, 0.12); }

/* "Hale" yuvarlakları yerine R logosu (giriş, kurulum, boş ekran). */
.hale span.logo-kutu { background: none !important; box-shadow: none !important; border-radius: 26%; }
.hale-logo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 26%; box-shadow: 0 12px 32px rgba(184, 122, 0, 0.35), 0 0 0 4px #fff; }

/* Metalik ayırıcı çizgi (destek rengi) */
.metal-cizgi { height: 2px; border: 0; background: var(--metal-cizgi); margin: 18px 0; }

/* ================================================================ 1.0.3 SARI HOLOGRAM (bütün sayfalar)
   Tabletin ana ekranındaki petek ağı ve halkaların SAKİN hâli: yalnız köşelerde (sağ üst, sol alt)
   görünür; yazıların arkası temiz kalır. Durağandır (hareket yok, bir kez çizilir).
   Tablet ana ekranı kendi (yüz merkezli) desenini kullanır: app.css bunu kapatır. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 100% 0%, rgba(217, 163, 0, 0.2) 0 1.2px, rgba(217, 163, 0, 0) 1.8px 42px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='27.713' viewBox='0 0 48 27.713'%3E%3Cpath d='M0 13.856 8 0h16l8 13.856-8 13.857H8zM32 13.856h16' fill='none' stroke='%23D9A300' stroke-opacity='.45' stroke-width='.7'/%3E%3C/svg%3E");
  background-size: auto, 60px 34.64px;
  background-repeat: no-repeat, repeat;
  -webkit-mask-image: radial-gradient(56vmax 40vmax at 100% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%), radial-gradient(46vmax 34vmax at 0% 100%, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
  mask-image: radial-gradient(56vmax 40vmax at 100% 0%, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%), radial-gradient(46vmax 34vmax at 0% 100%, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
}
@media print { html::before, body::before, body::after { display: none; } }

/* Madde 118: şifre göster/gizle */
.sifre-kutu { position: relative; display: block; }
.sifre-kutu input { padding-right: 60px; }
.sifre-goster {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: var(--r-m); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--lacivert-2);
}
.sifre-goster svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sifre-goster:hover { background: var(--sis); }

/* Madde 127: "Hareketi azalt" açıksa sayfalardaki bütün süs animasyonları durur (güvenlik ağı;
   dosyalardaki tek tek kurallara ek). Yüzün konuşması (tuval çizimi) bundan etkilenmez. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}