/*
 * Refika Aile — aile uygulamasının (iOS/Android) tasarımı; bilgisayarda deneme sürümü.
 * Tabletle aynı dil: sis zemin, lacivert yazı, firuze tek vurgu, nar yalnızca acil.
 */
body { font-size: 16px; line-height: 1.5; }
/* Madde 94: çentikli / kenardan kenara telefonlarda içerik sistem çubuklarının altına girmesin
   (tarayıcıda ve Capacitor kenar boşluğunu kendisi verdiğinde bu değerler 0'dır). */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
h1, h2 { letter-spacing: -0.015em; }
.genis { width: 100%; min-height: 54px; margin-top: 4px; }
.ipucu { color: var(--lacivert-3); font-size: 14px; margin: 0; }
.satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.satir.ortali { justify-content: center; }
.btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.buyuk { min-height: 54px; padding: 0 24px; font-size: 17px; }

/* Ortak "hale" imgesi (tabletteki ana ekranın aynısı) */
.hale { position: relative; width: 112px; height: 112px; }
.hale span {
  position: absolute; inset: 16px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 60%, #FFC933, #E09A00 72%);
}
.hale i { position: absolute; inset: 16px; border-radius: 50%; border: 2px solid var(--firuze-acik); animation: nefes 5s ease-in-out infinite; }
.hale i:nth-child(2) { animation-delay: 1.2s; }
@keyframes nefes { 0%, 100% { transform: scale(1.06); opacity: 0.2; } 50% { transform: scale(1.42); opacity: 0.75; } }

/* ================================================================ ACİL ŞERİDİ */
.alarm {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 16px clamp(16px, 3vw, 40px);
  background: var(--lacivert); color: var(--serit-yazi); font-weight: 500; font-size: 18px;
  animation: alarm-gir 0.35s ease;
}
.alarm svg { width: 28px; height: 28px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.alarm span { flex: 1; }
.alarm .btn { color: #fff; }
@keyframes alarm-gir { from { transform: translateY(-100%); } }

/* ================================================================ GİRİŞ */
.giris-ekrani { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tanitim {
  background: var(--lacivert); color: var(--serit-yazi);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 4vw, 56px);
}
.tanitim .mark { font-size: 22px; }
.tanitim-orta { max-width: 460px; }
.tanitim .hale { margin-bottom: 28px; }
.tanitim-baslik { margin: 0 0 14px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; }
.tanitim-yazi { margin: 0; color: #D9D4C7; font-size: 18px; line-height: 1.6; }
.tanitim-alt { margin: 0; color: #A7A090; font-size: 14px; max-width: 46ch; }

.giris-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 80px); max-width: 560px; width: 100%; justify-self: center; }
.giris-form h1 { margin: 28px 0 24px; font-size: 30px; font-weight: 500; }
.sekme { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sis-2); align-self: flex-start; }
.sekme button { border: none; background: transparent; padding: 10px 20px; border-radius: 999px; cursor: pointer; color: var(--lacivert-2); font-weight: 500; }
.sekme button[aria-selected="true"] { background: var(--kagit); color: var(--lacivert); box-shadow: var(--golge); }
.simulasyon { margin: 36px 0 0; color: var(--lacivert-3); font-size: 14px; }

/* ================================================================ ÜST ÇUBUK */
.ust {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  padding: 12px clamp(16px, 3vw, 40px);
  background: rgba(237, 242, 241, 0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sis-2);
}
.ust .mark { font-size: 19px; }
.tabletler { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabletler button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: none; /* madde 95: en az 44 px */
  background: transparent; color: var(--lacivert-2); cursor: pointer; white-space: nowrap; font-weight: 500;
}
.tabletler button[aria-current="true"] { background: var(--kagit); color: var(--lacivert); box-shadow: var(--golge); }
.tabletler .nokta { width: 8px; height: 8px; }
.ust-sag { display: flex; align-items: center; gap: 8px; }
.ben { color: var(--lacivert-2); font-size: 15px; padding-left: 8px; }

/* Tablet ekleme kodu */
.kod-paneli {
  margin: 24px auto 0; max-width: 1180px; width: calc(100% - 2 * clamp(16px, 3vw, 40px));
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
  padding: 28px 32px; background: var(--kagit); border-radius: var(--r-l); box-shadow: var(--golge);
  animation: gir 0.35s ease;
}
@keyframes gir { from { opacity: 0; transform: translateY(-6px); } }
.kod-baslik { margin: 0; color: var(--lacivert-3); font-size: 14px; }
.kod { margin: 4px 0; font-size: 52px; font-weight: 500; letter-spacing: 0.18em; font-variant-numeric: tabular-nums; color: var(--firuze-koyu); }
.kod.kucuk { font-size: 24px; letter-spacing: 0.12em; margin: 0; }
.kod-sure { margin: 0; color: var(--lacivert-3); font-size: 14px; }
.kod-adimlar { margin: 0; padding-left: 20px; color: var(--lacivert-2); display: grid; gap: 6px; max-width: 60ch; }
.kod-adimlar li::marker { color: var(--firuze); font-weight: 600; }

/* Boş durum */
.bos { max-width: 560px; margin: 10vh auto; text-align: center; padding: 0 20px; }
.bos .hale { margin: 0 auto 24px; }
.bos h1 { font-size: 32px; font-weight: 500; margin: 0 0 10px; }
.bos p { color: var(--lacivert-2); margin: 0 0 8px; }
.davet .girdi { width: 180px; min-height: 48px; text-align: center; letter-spacing: 0.2em; }
.davet .girdi:placeholder-shown { letter-spacing: normal; }

/* ================================================================ TABLET GÖRÜNÜMÜ */
.cihaz { max-width: 1080px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 96px; }

/* Kahraman: yüz, ad, durum cümlesi, ana eylemler ve kota halkası. */
.kahraman { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 8px 0 32px; }
.kahraman-yuz {
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 50% 60%, #FFC933, #E09A00 72%);
  background-size: cover; background-position: center 30%;
  display: flex; align-items: center; justify-content: center; color: var(--vurgu-yazi); font-size: 44px; font-weight: 500;
  box-shadow: 0 0 0 6px var(--sis), 0 0 0 8px var(--firuze-acik);
}
.kahraman-yuz.foto-var span { display: none; }
/* 0.9.0: yüzün altında asistanın adı (fotoğraf büyüğün değil, asistanın yüzü) */
.kahraman-sol { margin: 0; display: grid; justify-items: center; gap: 14px; }
.kahraman-asistan { display: grid; justify-items: center; line-height: 1.15; text-align: center; max-width: 140px; }
.kahraman-asistan small { font-size: 14px; letter-spacing: 0.02em; color: var(--lacivert-3); }
.kahraman-asistan b { font-size: 15px; font-weight: 600; color: var(--lacivert); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.kahraman h1 { margin: 6px 0 6px; font-size: clamp(36px, 4.6vw, 54px); font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; }
.cumle { margin: 0; font-size: 19px; color: var(--lacivert-2); max-width: 52ch; text-wrap: pretty; }
.cumle b { color: var(--lacivert); font-weight: 500; }
.kahraman .satir { margin-top: 20px; }
.kahraman .ipucu { margin-top: 10px; min-height: 1.4em; }
.durum-satiri { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--lacivert-2); font-size: 15px; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--lacivert-3); flex: none; display: inline-block; }
.nokta.on { background: var(--firuze); box-shadow: 0 0 0 4px var(--firuze-sis); }
.ayrac { width: 4px; height: 4px; border-radius: 50%; background: var(--lacivert-3); opacity: 0.6; }
.ayrac:has(+ :empty) { display: none; }

.kota { position: relative; width: 132px; height: 132px; border: none; background: none; cursor: pointer; padding: 0; color: var(--lacivert); align-self: start; }
.kota svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.kota circle { fill: none; stroke-width: 3.2; }
.kota-iz { stroke: var(--sis-2); }
.kota-dolu { stroke: var(--firuze); stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.kota.az .kota-dolu { stroke: var(--kayisi); }
.kota-metin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.kota-metin b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kota-metin small { font-size: 14px; color: var(--lacivert-3); }

/* Sekmeler: ince, metin tabanlı; seçili olanın altında firuze çizgi. */
.sekmeler { position: sticky; top: 64px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; background: var(--sis); border-bottom: 1px solid var(--sis-2); margin-bottom: 28px; }
.sekmeler button {
  position: relative; flex: none; min-height: 52px; padding: 0 18px; border: none; background: none; cursor: pointer;
  color: var(--lacivert-2); font: inherit; font-weight: 500; font-size: 16px;
}
.sekmeler button[aria-selected="true"] { color: var(--lacivert); }
.sekmeler button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--firuze); }
.rozet { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--nar); color: #fff; font-size: 14px; }

.panel { animation: gir 0.25s ease; }
.panel-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.panel-bas h2, .blok h2 { margin: 0 0 6px; font-size: 22px; font-weight: 500; }
.panel-bas .ipucu { max-width: 62ch; }
.izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.blok { background: var(--kagit); border-radius: var(--r-l); padding: 24px; box-shadow: var(--golge); margin-bottom: 20px; }
.izgara .blok { margin-bottom: 0; }
.blok.genis { grid-column: 1 / -1; }
.blok-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.btn.kucuk { min-height: 44px; padding: 0 12px; font-size: 14px; } /* madde 95: dokunma alanı en az 44 px */
.blok .ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 12px; }
.blok .secim { margin-bottom: 8px; }

/* Bugünkü ilaçlar: saat sütunu + ad + durum etiketi. */
.dozlar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.doz { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sis-2); }
.doz-sor { white-space: nowrap; }
@media (max-width: 520px) { .doz { grid-template-columns: 56px 1fr auto; } .doz-sor { grid-column: 2 / -1; justify-self: start; } }
.doz:first-child { border-top: none; }
.doz-saat { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--lacivert-2); }
.doz-ad b { display: block; font-weight: 500; }
.doz-ad small { color: var(--lacivert-3); font-size: 14px; }
.doz-durum { font-size: 14px; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
.doz-durum:empty { display: none; }
.doz.alindi .doz-durum { background: var(--firuze-sis); color: var(--firuze-koyu); }
.doz.alindi .doz-saat { color: var(--firuze-koyu); }
.doz.kacirildi .doz-durum { background: var(--kayisi-sis); color: var(--kayisi-koyu); }
.doz.zamani-geldi .doz-durum { background: var(--sis-2); color: var(--lacivert-2); }
.doz.bekliyor .doz-saat { color: var(--lacivert-3); }

/* Son 7 gün çubukları */
.hafta { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: end; height: 150px; margin-top: 14px; }
.gun { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.gun .cubuk { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: var(--firuze-acik); min-height: 4px; transition: height 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gun.bugun .cubuk { background: var(--firuze); }
.gun .sayi { font-size: 14px; font-weight: 500; color: var(--lacivert-2); }
.gun .ad { font-size: 14px; color: var(--lacivert-3); }
.gun.bugun .ad { color: var(--lacivert); font-weight: 500; }

/* Olay listeleri */
.olaylar { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.olaylar li { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; padding: 10px 0; align-items: start; }
.olaylar li + li { border-top: 1px solid var(--sis-2); }
.olaylar .simge { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; grid-row: span 2; }
.olaylar .simge svg { width: 18px; height: 18px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.olaylar .iyi .simge { background: var(--firuze-sis); }
.olaylar .iyi svg { stroke: var(--firuze-koyu); }
.olaylar .kotu .simge { background: var(--kayisi-sis); }
.olaylar .kotu svg { stroke: var(--kayisi-koyu); }
.olaylar .acil .simge { background: var(--nar-sis); }
.olaylar .acil svg { stroke: var(--nar); }
.olaylar b { font-weight: 500; }
.olaylar small { color: var(--lacivert-3); font-size: 14px; }
.yok { display: block; color: var(--lacivert-3); padding: 4px 0; grid-column: 1 / -1; }

/* İlaç kaydetme çubuğu (değişiklik varken alttan çıkar). */
.kaydet-cubugu {
  position: sticky; bottom: 16px; z-index: 6; margin-top: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 12px 12px 22px; border-radius: 999px; background: var(--lacivert); color: var(--serit-yazi);
  box-shadow: var(--golge-yuksek); animation: gir 0.25s ease;
}

/* Dualar ve kayıtlar */
.icerikler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.icerik-baslik { margin: 18px 0 4px; font-size: 14px; font-weight: 500; color: var(--lacivert-3); }
.icerik-baslik:first-child { margin-top: 0; }
.icerik { display: flex; align-items: center; gap: 10px; padding: 14px 14px 14px 20px; background: var(--kagit); border-radius: var(--r-m); box-shadow: var(--golge); }
.icerik-ad { flex: 1; min-width: 0; }
.icerik-ad b { display: block; font-weight: 500; }
.icerik-ad small { color: var(--lacivert-3); font-size: 14px; }
.icerik.var .icerik-ad small { color: var(--firuze-koyu); }
.icerik .btn { min-height: 44px; }

/* Paket */
.paket-durum { margin: 14px 0 20px; }
.paket-ad { margin: 0 0 10px; font-size: 20px; font-weight: 500; }
.olcer { height: 10px; border-radius: 999px; background: var(--sis-2); overflow: hidden; margin-bottom: 8px; }
.olcer span { display: block; height: 100%; border-radius: 999px; background: var(--firuze); transition: width 0.8s ease; }
.paketler { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.paket { padding: 20px; border-radius: var(--r-m); border: 1.5px solid var(--sis-2); display: flex; flex-direction: column; gap: 6px; }
.paket.secili { border-color: var(--firuze); background: var(--firuze-sis); }
.paket b { font-size: 18px; font-weight: 500; }
.paket .fiyat { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.02em; }
.paket .ipucu { flex: 1; }
.paket .btn { margin-top: 8px; }

/* Fotoğraf */
.foto { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.foto img, .foto-bos { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.foto-bos { display: flex; align-items: center; justify-content: center; background: var(--sis-2); color: var(--lacivert-3); font-size: 14px; }
.foto label.btn { cursor: pointer; }

/* ================================================================ MESAJLAR */
.sohbet { display: flex; flex-direction: column; height: min(640px, calc(100vh - 260px)); min-height: 420px; background: var(--kagit); border-radius: var(--r-l); box-shadow: var(--golge); overflow: hidden; }
.mesajlar { flex: 1; overflow-y: auto; padding: 22px 20px 8px; display: flex; flex-direction: column; gap: 8px; }
.mesajlar .bos-mesaj { margin: auto; text-align: center; color: var(--lacivert-3); max-width: 32ch; }
.balon { max-width: 72%; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--sis); line-height: 1.45; animation: gir 0.25s ease; }
.balon.benim { align-self: flex-end; background: var(--firuze); color: var(--vurgu-yazi); border-radius: 20px 20px 6px 20px; }
.balon .kim { display: block; font-size: 14px; opacity: 0.75; margin-bottom: 2px; }
.balon time { display: block; font-size: 14px; opacity: 0.65; margin-top: 4px; text-align: right; }
.hizli { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px 0; }
.hizli button { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--sis-2); background: transparent; color: var(--lacivert-2); cursor: pointer; font-size: 14px; }
.hizli button:hover { border-color: var(--firuze-acik); color: var(--firuze-koyu); }
.yaz { display: flex; gap: 8px; padding: 12px 14px 4px; }
.yaz .girdi { flex: 1; min-height: 50px; border-radius: 999px; padding: 0 20px; }
.gonder { width: 50px; min-height: 50px; padding: 0; flex: none; }
.sohbet .hata { padding: 0 20px 10px; margin: 0; min-height: 0; }

/* ================================================================ DAR EKRAN (telefon) */
@media (max-width: 860px) {
  .kahraman { grid-template-columns: auto minmax(0, 1fr); }
  .kota { grid-column: 1 / -1; width: 100%; height: auto; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--r-m); background: var(--kagit); box-shadow: var(--golge); }
  .kota svg { position: static; width: 48px; height: 48px; flex: none; }
  .kota-metin { position: static; flex-direction: row; align-items: baseline; gap: 8px; }
  .izgara { grid-template-columns: 1fr; }
  .kod-paneli { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
  .giris-ekrani { grid-template-columns: 1fr; }
  .tanitim { padding-bottom: 36px; gap: 28px; }
  .tanitim-alt { display: none; }
  .ust { position: static; flex-wrap: wrap; gap: 10px; }
  .ust-sag { margin-left: auto; }
  #add-tablet { padding: 0 14px; }
  #add-tablet .metin { display: none; }
  .tabletler { order: 3; flex-basis: 100%; }
  .ben { display: none; }
  .sekmeler { top: 0; }
  .kahraman-yuz { width: 76px; height: 76px; font-size: 30px; }
  .blok { padding: 18px; }
  .blok .ikili { grid-template-columns: 1fr; }
  .balon { max-width: 86%; }
  .panel-bas { flex-direction: column; }
}

/* Telefon: kahraman alanı ortalı ve sakin — yüz, ad, tek cümle, iki eşit düğme. */
@media (max-width: 560px) {
  .kahraman { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .kahraman-yuz { width: 104px; height: 104px; font-size: 40px; }
  .kahraman-metin { display: flex; flex-direction: column; align-items: center; }
  .durum-satiri { justify-content: center; }
  .kahraman .satir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .kahraman .satir .btn { width: 100%; justify-content: center; padding: 0 12px; }
  .kahraman .satir #call-end { grid-column: 1 / -1; }
  .kota { justify-content: center; }
  .sekmeler { overflow-x: auto; scrollbar-width: none; }
  .sekmeler::-webkit-scrollbar { display: none; }
}

/* 0.5.3: konum doğruluk uyarısı */
.uyari-kutu { margin: 4px 0 14px; padding: 12px 16px; border-radius: 12px; background: #fff4e5; color: #8a4b00; font-size: 15px; font-weight: 500; }

/* 0.5.3: kahraman yüz tıklanır → fotoğraf değiştirme */
button.kahraman-yuz { border: 0; padding: 0; cursor: pointer; position: relative; font-family: inherit; color: var(--vurgu-yazi); }
#foto-blok { scroll-margin-top: 140px; }
button.kahraman-yuz:focus-visible { outline: 3px solid var(--firuze, #FFC933); outline-offset: 3px; }
.kahraman-yuz .foto-rozet {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font-style: normal; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; background: #fff; color: #4A3510;
  box-shadow: 0 2px 8px rgba(23, 50, 58, 0.18); white-space: nowrap;
}

/* 0.6.3: acil uyarıda aile cevabı */
.alarm-dugmeler { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.alarm-dugmeler[hidden] { display: none; }
.alarm.acil { background: var(--nar); color: #fff; }

/* 0.6.3 — yapay zekâ ile karşıdan portre (4 seçenek) */
.portre { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sis-2); display: grid; gap: 12px; }
.portre[hidden] { display: none; }
.portre h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--lacivert); }
.onay-satir { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--lacivert-2); cursor: pointer; }
.onay-satir input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--firuze); flex: none; }
.portre.calisiyor #portre-state::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid var(--firuze-acik); border-top-color: var(--firuze); animation: portre-don 0.9s linear infinite; }
@keyframes portre-don { to { transform: rotate(360deg); } }
.portre-secenekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.portre-secenekler:empty { display: none; }
.portre-secenek { padding: 0; border: 3px solid transparent; border-radius: 18px; overflow: hidden; background: var(--sis); cursor: pointer; aspect-ratio: 1; transition: border-color 0.2s, transform 0.2s; }
.portre-secenek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portre-secenek:hover:not(:disabled) { transform: translateY(-2px); }
.portre-secenek:focus-visible { outline: 3px solid var(--firuze); outline-offset: 2px; }
.portre-secenek.secili { border-color: var(--firuze); }
.portre-secenek:disabled:not(.secili) { opacity: 0.45; cursor: default; }
@media (max-width: 560px) { .portre-secenekler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .portre.calisiyor #portre-state::before { animation: none; } }

/* 0.6.3 — hesap silme */
.hesap-sil { margin-top: 12px; border-top: 1px solid var(--sis-2); padding-top: 12px; }
.hesap-sil summary { cursor: pointer; color: var(--nar-koyu); font-weight: 500; padding: 6px 0; min-height: 44px; display: flex; align-items: center; } /* madde 95/122 */
.hesap-sil[open] summary { margin-bottom: 8px; }
.hesap-sil .satir { margin-top: 10px; }

/* ================================================================ 0.6.4 — aile paneli iyileştirmeleri */

/* Yaşlı arıyor şeridi (firuze; acil değil ama dikkat ister) */
.arama-seridi {
  position: sticky; top: 0; z-index: 29;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 40px);
  background: var(--firuze-koyu); color: #fff;
  animation: alarm-gir 0.35s ease;
}
.arama-seridi > svg { width: 26px; height: 26px; flex: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arama-metin { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.arama-metin b { font-size: 19px; font-weight: 500; }
.arama-metin small { font-size: 14px; color: #FFF0C2; }
.arama-dugmeler { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.arama-seridi .btn-ana { background: #fff; color: var(--firuze-koyu); }
.arama-seridi .btn-cizgi, .arama-seridi .btn-sessiz { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* Sakin not: tablet sessiz, pil az, bugün konuşulmadı. Kırmızı değil; kayısı tonlarında. */
.sakin-not {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 14px 16px 14px 18px;
  border-radius: var(--r-m); background: var(--kayisi-sis); color: var(--kayisi-koyu);
  animation: gir 0.3s ease;
}
.sakin-not > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sakin-not #calm-text { flex: 1 1 220px; font-weight: 500; color: var(--lacivert); }
.sakin-dugmeler { display: inline-flex; gap: 6px; margin-left: auto; }
.sakin-not .btn { color: var(--kayisi-koyu); }

/* Son güncelleme / bağlantı durumu */
.tazelik { margin: 4px 0 0; font-size: 14px; color: var(--lacivert-3); min-height: 1.2em; }
.tazelik.kopuk { color: var(--nar-koyu); }
.tazelik.kopuk::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--nar); vertical-align: 1px; opacity: 0.8; }

/* Haftalık ilaç uyumu */
.uyum { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sis-2); }
.uyum p { margin: 0 0 8px; color: var(--lacivert-2); font-size: 15px; }
.uyum .olcer { margin: 0; height: 8px; }
.uyum.dusuk .olcer span { background: var(--kayisi); }

/* Aile üyeleri */
.uyeler { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; }
.uyeler li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.uyeler li + li { border-top: 1px solid var(--sis-2); }
.uye-harf { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--firuze-sis); color: var(--firuze-koyu); font-weight: 500; }
.uye-ad { flex: 1 1 160px; min-width: 0; }
.uye-ad b { display: block; font-weight: 500; }
.uye-ad small { color: var(--lacivert-3); font-size: 14px; }
.uyeler li { flex-wrap: wrap; }
.uyeler .btn { flex: none; margin-left: auto; max-width: 100%; white-space: normal; line-height: 1.2; }

/* İki adımlı onay bekleyen düğme */
.btn.onay-bekliyor { background: var(--nar-sis); color: var(--nar-koyu); border-color: var(--nar); }

/* Boş durum: 3 adımlı başlangıç */
.adimlar { list-style: none; counter-reset: adim; margin: 22px auto 8px; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 420px; }
.adimlar li { counter-increment: adim; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 14px 16px; background: var(--kagit); border-radius: var(--r-m); box-shadow: var(--golge); }
.adimlar li::before { content: counter(adim); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--firuze-sis); color: var(--firuze-koyu); font-weight: 600; }
.adimlar b { font-weight: 500; color: var(--lacivert); }
.adimlar small { color: var(--lacivert-3); font-size: 14px; }
.bos .davet-not { margin: 28px 0 0; font-size: 14px; color: var(--lacivert-3); }
.bos .davet { margin-top: 8px; }

/* Telefon: acil şeridi alt alta; sekmeler 3×2 ızgara (yatay kaydırma yok) */
@media (max-width: 560px) {
  .alarm { flex-wrap: wrap; font-size: 17px; gap: 10px 12px; }
  .alarm > span#alarm-text { flex: 1 1 calc(100% - 44px); }
  .alarm-dugmeler { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .alarm-dugmeler .btn { min-width: 0; padding: 6px 10px; font-size: 15px; line-height: 1.2; white-space: normal; }
  .alarm #alarm-close { margin-left: auto; }
  .arama-dugmeler { width: 100%; }
  .sekmeler {
    position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    overflow: visible; padding: 6px; border: none; border-radius: var(--r-m); background: var(--sis-2); margin-bottom: 22px;
  }
  .sekmeler button { min-height: 44px; padding: 0 6px; border-radius: 12px; font-size: 15px; }
  .sekmeler button[aria-selected="true"] { background: var(--kagit); box-shadow: var(--golge); }
  .sekmeler button[aria-selected="true"]::after { display: none; }
  .rozet { margin-left: 4px; min-width: 22px; height: 22px; padding: 0 5px; font-size: 14px; }
}

/* ---------------------------------------------------------------- 0.6.5: Ayarlar sekmesi (tabletle aynı sıra ve dil) */
.blok .alan small, .blok .alan > small { display: block; color: var(--lacivert-3); font-size: 14px; margin-top: 6px; line-height: 1.45; }
.blok .alan > span:first-child + small { margin: -2px 0 10px; }
.blok .alan { margin-bottom: 20px; }
.blok .anahtar { margin-top: 6px; }
.blok h2 + .ipucu { margin-bottom: 16px; }
.rozet-sakin { background: var(--firuze-sis); color: var(--firuze-koyu); font-weight: 500; }

/* Profil tamlık kartı */
.tamlik:empty { display: none; }
.tamlik-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tamlik-baslik { font-size: 20px; font-weight: 500; }
.tamlik-sayi { color: var(--lacivert-3); font-size: 14px; }
.tamlik-olcer { height: 10px; margin: 12px 0 14px; border-radius: 999px; background: var(--sis-2); overflow: hidden; }
.tamlik-olcer span { display: block; height: 100%; border-radius: inherit; background: var(--firuze); transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tamlik-metin { margin: 0 0 12px; color: var(--lacivert-2); font-size: 15px; }
.tamlik-eksik { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tamlik-git { min-height: 44px; padding: 8px 16px; border-radius: 22px; border: 1.5px dashed var(--firuze-acik); background: transparent; color: var(--firuze-koyu); cursor: pointer; font: inherit; font-size: 15px; line-height: 1.35; text-align: left; }
.tamlik-git::before { content: "+ "; font-weight: 600; }
.tamlik-git:hover { background: var(--firuze-sis); border-style: solid; }
.isaretli { animation: isaret 2.4s ease; }
@keyframes isaret { 0%, 60% { box-shadow: 0 0 0 6px var(--firuze-sis); background: var(--firuze-sis); } 100% { box-shadow: 0 0 0 6px transparent; } }

/* Modlar nedir? */
.modlar-kutu { margin: 0 0 20px; padding: 4px 18px; border-radius: var(--r-m); background: var(--firuze-sis); }
.modlar-kutu summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 500; color: var(--firuze-koyu); }
.modlar { margin: 0 0 14px; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 18px; font-size: 15px; }
.modlar dt { font-weight: 500; }
.modlar dd { margin: 0; color: var(--lacivert-2); }

/* Aile kişileri */
.aile-kisiler { display: grid; gap: 10px; margin-bottom: 14px; }
.aile-kisiler:empty { display: none; }
.aile-kisi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.aile-vefat { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-size: 15px; color: var(--lacivert-2); white-space: nowrap; }
.aile-vefat input { width: 20px; height: 20px; accent-color: var(--firuze); }

/* Kaydet çubuğu ayarlarda hep görünür */
.ayar-kaydet { position: sticky; bottom: 16px; }
.ayar-kaydet span { font-size: 15px; }

@media (max-width: 760px) {
  .modlar { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .modlar dd { margin-bottom: 10px; }
  .aile-kisi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 10px; border-bottom: 1px solid var(--sis-2); }
  .ayar-kaydet { padding: 8px 8px 8px 18px; gap: 10px; }
  .ayar-kaydet span { font-size: 14px; line-height: 1.3; }
  .ayar-kaydet.varsayilan span { display: none; }
  .ayar-kaydet.varsayilan { justify-content: center; background: transparent; box-shadow: none; padding: 0; }
  .ayar-kaydet.varsayilan .btn { width: 100%; box-shadow: var(--golge-yuksek); min-height: 54px; }
}

/* ---------------------------------------------------------------- 0.7.3: düzenli Ayarlar, portre akışı, kaydedilmemiş uyarısı, sohbet silme */
.ayarlar .blok { margin-bottom: 16px; }
.blok-baslik { margin-bottom: 14px; }
.blok-baslik h2 { margin: 0 0 4px; }
.blok-baslik .ipucu { margin: 0; max-width: 64ch; line-height: 1.45; }
.blok h2 + .ipucu:last-child { margin-bottom: 0; }
.kucuk-yazi { font-size: 14px; line-height: 1.45; }

/* Ekrandaki yüz: solda tabletteki yüz, sağda portre hazırlama */
.foto-izgara { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.foto-izgara .foto { flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.foto-bilgi { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.foto-bilgi small { color: var(--lacivert-3); font-size: 14px; }
.foto-izgara .portre { margin: 0; padding: 0; border: 0; gap: 12px; }
.portre .btn.genis { margin-top: 0; }
.portre #portre-state:empty { display: none; }
.portre-kapali { margin: 0; align-self: center; padding: 14px 16px; border-radius: var(--r-m); background: var(--sis); color: var(--lacivert-2); font-size: 15px; }
.portre-kapali[hidden] { display: none; }
#photo-state:empty { display: none; }
#photo-state { margin-top: 12px; }
@media (max-width: 560px) {
  .foto-izgara { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .foto-izgara .foto { flex-direction: row; justify-content: flex-start; }
  .foto-izgara .foto img, .foto-izgara .foto-bos { width: 88px; height: 88px; }
  .foto-bilgi { align-items: flex-start; }
}

/* Katlanır "Gelişmiş" */
.gelismis { margin-top: 4px; border-top: 1px solid var(--sis-2); }
.gelismis > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--firuze-koyu); list-style: none; }
.gelismis > summary::-webkit-details-marker { display: none; }
.gelismis > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--gecis); flex: none; }
.gelismis[open] > summary::before { transform: rotate(45deg); }
.gelismis-ic { padding-top: 8px; }
.gelismis .modlar-kutu { padding: 12px 18px 4px; margin-bottom: 4px; }
.modlar-baslik { margin: 0 0 10px; font-weight: 500; color: var(--firuze-koyu); }

/* Kaydedilmemiş değişiklik: kaydet çubuğu kehribar uyarı şeridine dönüşür */
.kaydet-cubugu.kirli { background: var(--kayisi); color: var(--lacivert); }
.kaydet-cubugu.kirli span { font-weight: 500; }
.kaydet-cubugu.kirli .btn-ana { background: var(--lacivert); color: var(--serit-yazi); }
.sekmeler button.kirli::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--kayisi); vertical-align: 1px; }
@media (max-width: 760px) {
  .ayar-kaydet.kirli { flex-direction: column; align-items: stretch; border-radius: var(--r-m); padding: 12px; gap: 10px; }
  .ayar-kaydet.kirli span { font-size: 14px; display: block; }
  .ayar-kaydet.kirli .btn { width: 100%; min-height: 50px; }
}

/* Sayfa içi onay: kaydetmeden çıkılsın mı? */
.kirli-onay {
  position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px)); padding: 18px 20px; border-radius: var(--r-l);
  background: var(--kagit); box-shadow: var(--golge-yuksek); border: 2px solid var(--kayisi); animation: gir 0.2s ease;
}
.kirli-onay[hidden] { display: none; }
.kirli-onay p { margin: 0 0 14px; font-size: 17px; font-weight: 500; color: var(--lacivert); }
.kirli-onay-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) {
  .kirli-onay { bottom: 12px; }
  .kirli-onay-dugmeler { display: grid; grid-template-columns: 1fr; }
  .kirli-onay-dugmeler .btn { width: 100%; min-height: 48px; }
}

/* Mesajlar: üst satır ve sohbet geçmişini silme */
.sohbet-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 20px; border-bottom: 1px solid var(--sis-2); }
.sohbet-bas .ipucu { flex: 1; min-width: 0; }
.sohbet-bas .btn { flex: none; max-width: 60%; white-space: normal; line-height: 1.2; text-align: center; }
.mesajlar .bos-mesaj.silindi { color: var(--firuze-koyu); font-weight: 500; }
@media (max-width: 560px) {
  .sohbet-bas { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
  .sohbet-bas .btn { max-width: none; align-self: flex-end; }
}
.foto-izgara > * { min-width: 0; }
.foto-izgara .portre { grid-template-columns: minmax(0, 1fr); }
.portre .btn.genis { white-space: normal; line-height: 1.3; height: auto; padding: 12px 18px; text-align: center; }

/* 0.7.9: kullanım şeklini değiştir (tek Refika uygulaması) */
.mod-baglanti { margin: 18px 0 0; text-align: center; }
.baglanti-dugme { border: 0; background: none; padding: 10px 6px; min-height: 44px; color: var(--firuze-koyu); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 0.7.11: televizyon kanal listesi */
.tv-kanal-liste { display: grid; gap: 10px; margin-bottom: 12px; }
.tv-kanal-liste:empty { display: none; }
.tv-kanal-satir { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 10px; align-items: center; }

/* 0.8.0: Fotoğraf / video paylaşımı */
.paylas-btn { flex: none; min-height: 50px; border-radius: 999px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; }
.paylas-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .paylas-btn span { display: none; } .paylas-btn { padding: 0 13px; } }
.paylas-onizleme { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 14px; align-items: start; margin: 10px 14px 0; padding: 12px; border-radius: var(--r-m); background: var(--firuze-sis); }
.paylas-onizleme[hidden] { display: none; }
.paylas-medya { border-radius: var(--r-s); overflow: hidden; background: #14110B; min-height: 120px; display: grid; place-items: center; }
.paylas-medya img, .paylas-medya video { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.paylas-yan { display: grid; gap: 10px; }
.paylas-baslik { margin: 0; font-weight: 500; color: var(--lacivert); }
.paylas-yan .girdi { min-height: 48px; border-radius: var(--r-s); }
.paylas-yan .satir { display: flex; gap: 8px; flex-wrap: wrap; }
.paylas-yan .ipucu { margin: 0; }
.paylas-ilerleme { width: 100%; height: 10px; accent-color: var(--firuze); }
@media (max-width: 560px) { .paylas-onizleme { grid-template-columns: 1fr; } }
.balon.paylas-balon { max-width: min(78%, 360px); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.paylas-balon .kim { padding: 0 6px; }
.paylas-kucuk { display: grid; place-items: center; width: 100%; min-height: 140px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: rgba(13, 27, 31, 0.85); color: #fff; cursor: pointer; font: inherit; }
.paylas-kucuk img, .paylas-kucuk video { width: 100%; height: auto; max-height: 320px; object-fit: contain; display: block; }
.paylas-kucuk video { object-fit: contain; background: #000; }
.paylas-ikon { padding: 16px; font-size: 15px; font-weight: 500; }
.paylas-not { padding: 0 6px; line-height: 1.4; }
.paylas-alt { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 6px; font-size: 14px; opacity: 0.85; }
.paylas-alt time { margin: 0; }
.paylas-etiket.yeni { background: var(--kayisi, #e38b2c); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.paylas-sil { margin-right: auto; border: 0; background: transparent; color: inherit; text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; padding: 4px 2px; }
.paylas-buyuk { position: fixed; inset: 0; z-index: 400; background: rgba(13, 27, 31, 0.94); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; place-items: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.paylas-buyuk img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }

/* 0.9.0: büyük ekle paneli ve "tablet henüz bağlanmadı" şeridi */
.buyuk-ekle .alan { display: grid; gap: 6px; margin: 6px 0 0; }
.buyuk-ekle .alan span { font-size: 14px; color: var(--lacivert-2); }
.buyuk-ekle .girdi { min-width: min(320px, 100%); }
.tablet-yok { background: var(--firuze-sis); }
.tablet-yok svg { stroke: var(--firuze-koyu); }

/* 0.9.0: özel talimat ve dini özellikler */
.etiket-onemli { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: var(--kayisi-sis); color: var(--kayisi-koyu); font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.talimat-blok { border: 1.5px solid var(--firuze-acik); }
.talimat-oneriler { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.talimat-oneriler button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px dashed var(--firuze-acik); background: transparent; color: var(--firuze-koyu); font: inherit; font-size: 14px; cursor: pointer; }
.talimat-oneriler button:hover { background: var(--firuze-sis); border-style: solid; }
.talimat-blok textarea { min-height: 150px; font-size: 16px; line-height: 1.5; }
.talimat-alt { display: block; margin-top: 6px; }
.talimat-uyari { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--kayisi-sis); color: var(--lacivert); font-size: 14px; }
.talimat-uyari[hidden] { display: none; }
.din-secim { margin: 4px 0 6px; }
#r-din-ayrinti[hidden] { display: none; }
.ozel-yukle .dosya-sec { font: inherit; font-size: 14px; padding: 10px 0; max-width: 100%; }
.ozel-oynatici { display: block; width: 100%; max-width: 520px; margin-top: 10px; border-radius: 12px; grid-column: 1 / -1; }
.bos-ozel { color: var(--lacivert-3); }
.hazir-icerik { margin-top: 18px; }
#ok-ilerleme { width: 160px; }
.tanit-kart { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; padding: 18px 22px; border-radius: var(--r-l, 22px); background: linear-gradient(135deg, var(--firuze-sis), #fff6ec); box-shadow: var(--golge); }
.tanit-kart[hidden] { display: none; }
.tanit-metin { display: grid; gap: 4px; max-width: 60ch; }
.tanit-metin b { font-size: 19px; font-weight: 600; color: var(--lacivert); }
.tanit-metin span { color: var(--lacivert-2); font-size: 15px; }
.tanit-sag { display: flex; align-items: center; gap: 14px; }
.tanit-yuzde { font-size: 28px; font-weight: 500; color: var(--firuze-koyu); font-variant-numeric: tabular-nums; }
.tablet-yok .btn-ana, .tablet-yok .btn-ana:hover { color: #fff; background: var(--firuze-koyu, #E09A00); }

/* ================================================================ 1.0.0 GÜN IŞIĞI (aile)
   Giriş ekranının tanıtım yarısı Refika sarısı: logo rengi markanın kendisi olur. */
.tanitim {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #FFD23F 0%, #FEBE04 52%, #F7AE00 100%);
  color: var(--vurgu-yazi);
}
.tanitim > * { position: relative; z-index: 1; }
.tanitim::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400' fill='none'%3E%3Cpath d='M0 260 C150 200 300 320 450 260 S750 200 900 260 S1120 310 1200 260' stroke='%23fff' stroke-opacity='.55' stroke-width='1.6'/%3E%3Cpath d='M0 300 C170 250 320 350 500 300 S800 240 980 300 S1140 330 1200 300' stroke='%23fff' stroke-opacity='.35' stroke-width='1.2'/%3E%3Cpath d='M0 340 C140 310 300 380 460 340 S760 300 920 340 S1110 365 1200 340' stroke='%232A2416' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 1200px 100%; background-position: 0 100%;
  animation: holo-dalga 70s linear infinite;
}
.tanitim .mark-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 18px rgba(138, 90, 0, 0.25); }
.tanitim-yazi { color: #4A3A0A; }
.tanitim-alt { color: #5E4A12; }
.tanitim .hale span { background: radial-gradient(circle at 34% 28%, #FFFFFF, #FFFFFF 30%, #EEF0F2 62%, #C9CDD3 100%); box-shadow: 0 10px 30px rgba(138, 90, 0, 0.25); }
.tanitim .hale i { border-color: rgba(255, 255, 255, 0.85); }
.balon.benim { color: var(--vurgu-yazi); }
@media (prefers-reduced-motion: reduce) { .tanitim::after { animation: none; } }

/* 1.0.0: asistan bloğunun içindeki "Fotoğraf ekle" alt bölümü */
.alt-blok { margin: 6px 0 22px; padding: 18px; border-radius: var(--r-m); background: var(--gunes-sis); border: 1px solid var(--gunes-acik); }
.alt-blok h3 { margin: 0 0 4px; font-size: 17px; font-weight: 500; }

/* 1.0.0: Gelişmiş ayarlar gizli değil, görünür */
.acik-gelismis { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sis-2); }
.gelismis-baslik { margin: 0 0 12px; font-size: 17px; font-weight: 500; color: var(--kehribar); }

/* 1.0.0: Dini özellikler — ne işe yaradığı adım adım */
.din-akis { list-style: none; counter-reset: din; margin: 4px 0 14px; padding: 0; display: grid; gap: 10px; }
.din-akis li { counter-increment: din; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--kagit); border: 1px solid var(--metal-acik); }
.din-akis li::before { content: counter(din); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gunes); color: var(--vurgu-yazi); font-weight: 600; }
.din-akis b { font-weight: 500; }
.din-akis span { color: var(--lacivert-2); font-size: 15px; }

/* 1.0.0: adım adım kurulum sihirbazı */
.sihirbaz-ust { position: sticky; top: 64px; z-index: 6; margin: 0 0 18px; padding: 16px 18px 14px; border-radius: var(--r-l); background: var(--kagit); border: 1px solid var(--gunes-acik); box-shadow: 0 10px 30px rgba(254, 190, 4, 0.18); }
.sihirbaz-satir { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--lacivert-2); }
.sihirbaz-yuzde { color: var(--kehribar); font-weight: 500; }
.sihirbaz-baslik { margin: 6px 0 10px; font-size: 22px; font-weight: 500; }
.sihirbaz-cubuk { height: 8px; border-radius: 999px; background: var(--metal-acik); overflow: hidden; }
.sihirbaz-cubuk span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gunes), var(--turuncu)); transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sihirbaz-alt { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; background: #fff; border-top: 1px solid var(--metal-acik); box-shadow: 0 -10px 30px rgba(42, 36, 22, 0.08); }
.sihirbaz-alt .bosluk { flex: 1; }
.sihirbaz-alt .hata { flex-basis: 100%; order: 5; margin: 0; }
.sihirbaz-davet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -8px 0 22px; }
.sihirbaz-acik .sihirbaz-davet { display: none; }
#unuttum-box h1 { margin: 28px 0 16px; font-size: 28px; font-weight: 500; }

/* 1.0.0: ilaç satırında "Tablete sor" + "Bilgi aldım: içti" */
.doz-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.doz-icti.onay-bekliyor { white-space: normal; max-width: 260px; text-align: left; line-height: 1.3; padding: 8px 14px; }
@media (max-width: 520px) { .doz-dugmeler { grid-column: 2 / -1; justify-content: flex-start; } }

/* 1.0.0: Sağlık sekmesi */
.saglik-ozet { margin: 4px 0 6px; font-size: 20px; font-weight: 500; }
.saglik-oneriler { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.saglik-oneriler li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: var(--kagit); border: 1px solid var(--metal-acik); }
.saglik-oneriler li b { font-weight: 500; }
.saglik-oneriler li span { grid-column: 1; color: var(--lacivert-2); font-size: 15px; }
.saglik-oneriler li button { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 520px) { .saglik-oneriler li { grid-template-columns: 1fr; } .saglik-oneriler li button { grid-column: 1; grid-row: auto; justify-self: start; } }
.saglik-kart { border: 1px solid var(--gunes-acik); background: linear-gradient(180deg, var(--gunes-sis), #fff 70%); }

/* 1.0.0: özet grafikleri */
.grafikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.grafik { margin: 0; padding: 14px 14px 8px; border-radius: var(--r-m); background: var(--kagit); border: 1px solid var(--metal-acik); }
.grafik figcaption { font-size: 14px; font-weight: 500; color: var(--lacivert-2); margin-bottom: 4px; }
.genis-grafik { grid-column: 1 / -1; }
.svg-grafik { width: 100%; height: auto; display: block; overflow: visible; }
.g-taban { stroke: var(--metal); stroke-width: 1; }
.g-alan { fill: rgba(254, 190, 4, 0.16); }
.g-cizgi { fill: none; stroke: var(--gunes); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.g-nokta { fill: #fff; stroke: var(--gunes); stroke-width: 2.5; }
.g-nokta.bugun { fill: var(--gunes); stroke: var(--kehribar); }
.g-deger { font-size: 14px; font-weight: 500; fill: var(--lacivert); font-family: var(--font); }
.g-gun { font-size: 14px; fill: var(--lacivert-3); font-family: var(--font); }
.g-alindi { fill: var(--gunes); }
.g-kacirildi { fill: var(--metal); }
.ruh-serit { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 6px 0 4px; }
.ruh-gun { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: var(--metal-acik); }
.ruh-gun small { color: var(--lacivert-3); font-size: 14px; }
.ruh-metin { font-size: 14px; font-weight: 500; }
.ruh-nokta { width: 16px; height: 16px; border-radius: 50%; background: var(--gunes); box-shadow: 0 0 0 4px rgba(254, 190, 4, 0.2); }
.ruh-gun.uzgun { background: var(--kayisi-sis); }
.ruh-gun.uzgun .ruh-nokta { background: var(--turuncu); box-shadow: 0 0 0 4px rgba(242, 140, 24, 0.2); }
.ruh-gun.kotu { background: var(--nar-sis); }
.ruh-gun.kotu .ruh-nokta { background: var(--nar); box-shadow: 0 0 0 4px rgba(193, 95, 60, 0.18); }
@media (max-width: 520px) { .ruh-metin { display: none; } .ruh-serit { gap: 4px; } }

/* 1.0.0: ev adresi haritası */
.adres-arac { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 10px; }
.adres-harita { height: 280px; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--metal); margin-bottom: 8px; z-index: 0; }
.adres-oneri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r-m); background: var(--gunes-sis); border: 1px solid var(--gunes-acik); margin-bottom: 14px; }
.harita-igne span { display: block; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gunes); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(42, 36, 22, 0.35); }
.harita-igne span::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }

/* ------------------------------------------------------------------ 1.0.0 İbadet sekmesi */
.vakit-liste { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 4px; }
.vakit-liste li {
  display: grid;
  grid-template-columns: 6.5rem 4rem 1fr;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
}
.vakit-liste li b { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.vakit-liste li small { color: var(--kehribar, #8a5a00); text-align: right; }
.vakit-liste li.gecti { opacity: 0.55; }
.vakit-liste li.sonraki { background: rgba(254, 190, 4, 0.22); box-shadow: inset 4px 0 0 var(--gunes, #febe04); }
.ibadet-icerik { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ibadet-icerik li { display: grid; gap: 2px; padding: 0.7rem 0.9rem; border: 1px solid #eef0f2; border-radius: 14px; background: #fff; }
.ibadet-icerik li span { color: #5a5240; font-size: 0.95rem; }
.ibadet-icerik li small.hazir { color: #2f6b2f; }
.ibadet-icerik li small.eksik { color: #8a8f96; }
.blok.vurgula { box-shadow: 0 0 0 3px var(--gunes, #febe04); transition: box-shadow 0.3s; }
.kisa-alan { max-width: 12rem; margin-top: 0.6rem; }
@media (max-width: 520px) {
  .vakit-liste li { grid-template-columns: 5.5rem 3.6rem 1fr; padding: 0.5rem 0.4rem; }
}

/* ------------------------------------------------------------------ 1.0.1 Ölçümler, dini günler, okunan sureler */
.olcum-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.olcum-kart { border: 1px solid #eef0f2; border-radius: 16px; padding: 12px 14px; background: #fff; }
.olcum-kart.uyari { border-color: var(--turuncu, #d97757); box-shadow: inset 4px 0 0 var(--turuncu, #d97757); }
.olcum-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.olcum-deger { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.olcum-kart small { color: #6b6455; }
.olcum-gecmis { list-style: none; margin: 8px 0 0; padding: 0; font-size: .92rem; color: #5a5240; display: grid; gap: 2px; }
.olcum-gecmis li.uyari { color: #a34a2b; }
.dini-gunler, .okunan-sureler { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.dini-gunler li, .okunan-sureler li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #fffaf0; }
.dini-gunler li span, .okunan-sureler li span { color: #6b6455; font-size: .95rem; }
.okunan-sureler li.bos { background: none; color: #8a8f96; padding-left: 0; }

/* ------------------------------------------------------------------ 1.0.1 ALTIN */
/* Üst çubuk: beyaz, altında ince sarı-metalik çizgi; logo büyük. */
.ust { background: rgba(255, 255, 255, 0.94); border-bottom: 0; box-shadow: 0 1px 0 #F1E2B0, 0 4px 18px rgba(184, 122, 0, 0.06); }
.ust::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #FEBE04, #FFD966 40%, #E3E6EA 70%, #FEBE04); opacity: 0.9; }
.ust .mark { font-size: 22px; }
/* Giriş ekranı sol paneli: sarıdan koyu altına; büyük başlık BEYAZ ("sarı üzerine beyaz"). */
.tanitim { background: var(--altin-bant); color: #fff; position: relative; overflow: hidden; }
/* Madde 122: sarı zemin üzerine beyaz yazı 1,7:1 idi (tasarım kuralı da "konmaz" diyor) → koyu mürekkep, 8:1 üzeri. */
.tanitim .mark { color: var(--vurgu-yazi); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.tanitim-baslik { color: var(--vurgu-yazi); font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.tanitim-yazi { color: #3D2C0A; font-weight: 400; }
.tanitim-alt { color: #3D2C0A; }
.tanitim .hale { width: 132px; height: 132px; }
/* Özetteki büyük ad altın; birincil düğmeler sarı (yazı koyu, okunaklı) */
.kisi-ad, #e-name { color: var(--baslik); }
.sekmeler [role="tab"][aria-selected="true"] { color: var(--baslik); }
.sekmeler [role="tab"][aria-selected="true"]::after { background: var(--gunes); }
/* Uyarı/acil vurguları Claude turuncusu; kart kenarları metalik */
.blok { border: 1px solid #ECEEF1; }
.rozet:not(.rozet-sakin) { background: var(--turuncu-koyu); color: #fff; } /* madde 122: beyaz yazı 4.98:1 (turuncu 3.1:1 idi); sakin rozet sarı kalır */

/* 1.0.2: tablet sağlığı (hata ve cevap süresi) */
.tani { margin-top: 14px; }
.tani summary { cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.tani-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--lacivert-2, inherit); overflow-wrap: anywhere; }
.tani-liste b { font-weight: 500; margin-right: 4px; }

/* 1.0.2: kayıtta gizlilik onayı */
.onay-kutu { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.onay-kutu input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--firuze, currentColor); }
/* 1.0.2: uzun düğme yazısı dar ekranda kartın dışına taşmasın */
#oturum-blok .btn, #r-b-uyari select { max-width: 100%; white-space: normal; line-height: 1.25; }

/* 1.0.3: acilde 112'ye okunacak bilgiler (adres, sağlık kartı) */
.alarm-bilgi { flex-basis: 100%; display: grid; gap: 2px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); color: #4A3510; font-size: 15px; line-height: 1.4; }
.alarm-bilgi span:first-child { font-weight: 600; }
#alarm-112 { text-decoration: none; }
.alarm { flex-wrap: wrap; }

/* 1.0.3: QR ile tablet bağlama */
.qr-onay-liste { display: grid; gap: 8px; margin-bottom: 10px; }
.qr-tara { position: fixed; inset: 0; z-index: 80; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; background: rgba(20, 16, 8, 0.92); color: #fff; text-align: center; }
.qr-tara[hidden] { display: none; }
.qr-tara video { width: min(86vw, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 3px solid var(--firuze, #FEBE04); background: #000; }
.qr-tara p { margin: 0; font-size: 17px; }
.qr-tara .btn { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* ================================================================ 1.0.3 SARI HOLOGRAM (aile uygulaması)
   Tabletteki gün halkasının sakin bir yankısı: büyüğün yüzünün çevresinde ince, noktalı altın
   halka (çok yavaş döner; "hareketi azalt"ta durur). Sekmeler beyaz zemin + ince altın-inci kenar. */
button.kahraman-yuz::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg, rgba(217, 163, 0, 0.55) 0deg 1.2deg, transparent 1.2deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px), #000 calc(100% - 1px), transparent 100%);
  mask-image: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px), #000 calc(100% - 1px), transparent 100%);
  animation: aile-halka 90s linear infinite;
}
@keyframes aile-halka { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.kahraman-yuz::before { animation: none; } }

@media (max-width: 560px) {
  .sekmeler {
    border: 1.5px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, rgba(254, 190, 4, 0.7), rgba(255, 246, 214, 0.6) 35%, rgba(201, 205, 211, 0.6) 65%, rgba(242, 169, 0, 0.55)) border-box;
    box-shadow: var(--golge);
  }
  .sekmeler button[aria-selected="true"] { background: var(--gunes-sis); box-shadow: inset 0 0 0 1.5px var(--gunes); color: var(--murekkep); }
  /* 7 sekme: son satırda tek kalan sekme tam genişlik (boşluk bırakmasın) */
  .sekmeler button:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ================================================================ 1.0.3: TASARIM DÜZELTMELERİ */
/* 1) Özet dışındaki sekmelerde kahraman alanı tek satıra iner: yüz, ad, durum, "Ara".
      İçerik ekranın başına gelir; kota kartı, cümle ve "Son güncelleme" yalnız Özet'te kalır. */
.cihaz.sekme-ic .kahraman {
  grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; text-align: left;
  justify-items: stretch; padding: 4px 0 18px;
}
.cihaz.sekme-ic .kahraman-sol { gap: 0; }
.cihaz.sekme-ic .kahraman-yuz { width: 56px; height: 56px; font-size: 22px; box-shadow: 0 0 0 3px var(--sis), 0 0 0 4px var(--firuze-acik); }
.cihaz.sekme-ic .kahraman-yuz .foto-rozet,
.cihaz.sekme-ic .kahraman-asistan,
.cihaz.sekme-ic .cumle,
.cihaz.sekme-ic .tazelik,
.cihaz.sekme-ic .ipucu:empty,
.cihaz.sekme-ic #kota-mini,
.cihaz.sekme-ic #focus-msg { display: none; }
.cihaz.sekme-ic .kahraman-metin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; }
.cihaz.sekme-ic .kahraman h1 { margin: 0; font-size: 24px; letter-spacing: -0.01em; grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cihaz.sekme-ic .durum-satiri { font-size: 13px; justify-content: flex-start; grid-column: 1; grid-row: 2; flex-wrap: wrap; row-gap: 0; min-width: 0; }
.cihaz.sekme-ic .kahraman .satir { margin: 0; display: block; width: auto; grid-column: 2; grid-row: 1 / 3; }
.cihaz.sekme-ic .kahraman .satir .btn { width: auto; min-height: 46px; padding: 0 16px; font-size: 15px; }
.cihaz.sekme-ic .kahraman .ipucu { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  .cihaz.sekme-ic .kahraman .satir .btn span { display: none; }           /* telefonda yalnız ahize simgesi */
  .cihaz.sekme-ic .kahraman .satir .btn { width: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .cihaz.sekme-ic .kahraman .satir .btn svg { margin: 0; }
  .cihaz.sekme-ic .kahraman .satir #call-end { width: auto; border-radius: 999px; padding: 0 14px; }
  .cihaz.sekme-ic .kahraman .satir #call-end span { display: inline; }
}

/* 2) Sohbet balonları: tabletten gelen balon beyaz zemin üzerinde beyazdı (görünmüyordu). */
.balon { background: #F4F1EA; border: 1px solid #ECE7DB; }
.balon.benim { background: var(--firuze); border-color: var(--firuze); }
.balon .kim { font-weight: 500; color: var(--lacivert-2); }
.balon.benim .kim { color: var(--vurgu-yazi); }
.mesajlar { gap: 10px; background: linear-gradient(180deg, #FFFDF7, var(--kagit) 60px); }

/* 3) Telefonda sekme ızgarası kaydırınca kaybolmasın: üstte sabit, altı hafif gölgeli. */
@media (max-width: 560px) {
  .sekmeler { position: sticky; top: 0; z-index: 5; background: var(--sis-2); box-shadow: 0 6px 16px -10px rgba(42, 36, 22, 0.35); }
}

/* Madde 286: "Verilerimi indir" telefonda ekranda gösterilir */
.veri-onizleme { max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 13px; background: #FAFAF7; border: 1px solid var(--sis-2); border-radius: 10px; padding: 10px; margin-top: 10px; user-select: text; -webkit-user-select: text; }

/* Bölüm 6 (16 Ekim 2026): çoklu hitap örneği */
.hitap-ornek { color: var(--turuncu-yazi, #B85F00); font-weight: 500; }
.hitap-ornek:empty { display: none; }
/* Çoklu seçim olduğu belli olsun: işaretli biçimde onay işareti */
#r-hitap-secim input:checked + span::before { content: '✓'; margin-right: 8px; font-weight: 700; }

/* Tur 45 (26 Ekim, Onur: "tuşlara tıklayınca mavi oluyor; bütün programda gözden kaçan tasarım hatası kalmasın"):
   Android WebView'ın mavi dokunma vurgusu bu sayfada da kapalı; dokunma geri bildirimini ögelerin kendi :active
   stilleri verir, odak halkası 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; }

/* Tur 48 (denetim: aile uygulaması İlk Test sürümünü bilmiyor, tabletin yapmadığı şeyleri vaat ediyordu): İlk Test'te
   tablette olmayanlar aile sayfasında da görünmez (görüntülü arama, mesaj, ölçüm, zikirmatik, görünüm, acil kartı). */
html[data-profil="ilk-test"] .ilk-test-gizli { display: none !important; }

/* Tur 50 (A11, tur 49 denetimi YÜKSEK): yalnız İlk Test'e özgü cümleler (tam sürümde görünmez); tam sürüm cümlesi
   .ilk-test-gizli ile İlk Test'te gizlenir. İlk Test'te bildirim yok: "Bildirimler" ve "Tablet bağlantısı koparsa"
   blokları gizli; tablet QR göstermediği için "QR okut" da gizli. */
html:not([data-profil="ilk-test"]) .yalniz-ilk-test { display: none !important; }

/* Tur 50 (K1, tur 49 denetimi ORTA): telefonda sekme çubuğu 3 satır / 158 px idi ve yapışkandı (ekranın üçte biri).
   Dar ekranda tek satır, yana kaydırmalı (~56 px); seçili sekme js/aile-panel.js showTab ile görünür alana kayar. */
@media (max-width: 560px) {
  .sekmeler {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Kaydırılacak sekme varsa o kenarda hafif gölge (içerik kayınca kendiliğinden kaybolur). */
    background:
      linear-gradient(90deg, var(--sis-2) 40%, rgba(255, 255, 255, 0)) left center / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--sis-2) 40%, rgba(255, 255, 255, 0)) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(42, 36, 22, 0.28), rgba(42, 36, 22, 0)) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(42, 36, 22, 0.28), rgba(42, 36, 22, 0)) right center / 14px 100% no-repeat scroll,
      var(--sis-2);
  }
  .sekmeler::-webkit-scrollbar { display: none; }
  .sekmeler button { flex: none; padding: 0 16px; white-space: nowrap; scroll-snap-align: start; }
  .sekmeler button:last-child:nth-child(3n + 1) { grid-column: auto; }
}

/* Tur 50 (tur 49 denetimi DÜŞÜK): İbadet sekmesindeki soluk gri yazılar #8a8f96 3,26:1 → #5F656C (≈5,9:1 beyazda,
   5,2:1 kremde); "Kayıt yüklenmedi" 13,3 px → 14 px. Kayıt ekranındaki onay satırı 42 → 48 px dokunma yüksekliği. */
.ibadet-icerik li small.eksik { color: #5F656C; font-size: 14px; }
.okunan-sureler li.bos { color: #5F656C; }
.onay-kutu { min-height: 48px; align-items: center; }

/* Tur 52 (telefon 320 px): uzun düğme yazısı (ör. "Yeni tablete geç / yeniden bağla") satırdan taşıp sayfayı yana kaydırıyordu. */
@media (max-width: 420px) { .satir > .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; } }