/* GYMARD uygulamasına özel eklemeler. Renkler ve ölçüler tasarim.css belirteçlerinden gelir.
   Sayfalar sunucuda hazırlandığı için demodaki düğme bileşenlerinin bağlantı (a) karşılıkları burada. */

/* ---------- Kabuk ---------- */
.brand { text-decoration: none; color: inherit; }
.brand-logo { height: 44px; width: auto; display: block; max-width: 52vw; object-fit: contain; object-position: left center; }
/* Arkası şeffaf logo: koyu temada beyaz yazılı, açık temada koyu yazılı sürüm (araclar\logo-hazirla.ps1 üretir). */
img.logo-acik { display: none; }
:root[data-theme="light"] img.logo-koyu { display: none; }
:root[data-theme="light"] img.logo-acik { display: block; }
.topbar-kisi { flex: none; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-btn { text-decoration: none; }
.sidenav a.side-link, .tabbar a.tab { text-decoration: none; }
.content.menusuz { padding-bottom: 40px; }
.satir-ici { margin: 0; display: inline-flex; }

/* ---------- Bağlantı olarak satır, gün, oturum, çip ---------- */
a.row { color: inherit; text-decoration: none; transition: background 0.15s; }
a.row:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.row > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
/* Demo, dar ekranda satır düğmelerini avatarın genişliği kadar içeri alıyor; avatarsız satırlarda bu boşluk gereksiz. */
@media (max-width: 559px) {
    .row.wrap > .row-main:first-child ~ .row-actions { padding-left: 0; justify-content: flex-start; }
}
.row > svg.chev { width: 18px; height: 18px; }
a.chip, .seg a { text-decoration: none; display: inline-flex; align-items: center; }
a.chip { flex: none; white-space: nowrap; }
a.chip[aria-current="true"] { background: var(--grad-accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 6px 16px -8px var(--glow); }
.seg a { padding: 7px 12px; min-height: 34px; font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.seg a + a { border-left: 1px solid var(--line); }
.seg a[aria-current="true"] { background: var(--grad-accent); color: var(--on-accent); }
a.day-btn { text-decoration: none; }
a.session, a.wg-item { color: inherit; text-decoration: none; }
a.back-btn { text-decoration: none; }
a.icon-btn { text-decoration: none; }

/* ---------- Sayfa ---------- */
.panel.dar { width: 100%; max-width: 440px; margin: 16px auto 0; }
.sutun { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.giris-logo { width: min(230px, 66%); height: auto; max-height: 160px; object-fit: contain; margin: 6px auto 10px; }
img.giris-logo.logo-koyu { display: block; }
.baslik-ad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ustu-cizili { text-decoration: line-through; color: var(--muted); }
.gizli { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Demodaki .kv kısa sayılar için; burada değerler uzun olabildiği için iki sütun da daralabilir ve satır kırılır. */
.kv { grid-template-columns: minmax(6.5em, 1fr) minmax(0, 1.7fr); }
.kv dt { overflow-wrap: anywhere; }
.kv dd { overflow-wrap: anywhere; }
.kv.sol dd { text-align: left; }

/* ---------- Uyarılar ---------- */
.notice.bad { background: var(--bad-soft); color: color-mix(in srgb, var(--bad) 75%, var(--fg)); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.notice.ok { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 75%, var(--fg)); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }

/* ---------- Form ---------- */
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
legend { font-weight: 650; font-size: var(--fs-sm); padding: 0 6px; }
.check input[type="radio"] { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--accent); flex: none; }
details > summary { cursor: pointer; color: var(--accent-ink); font-weight: 650; font-size: var(--fs-sm); }
details[open] > summary { margin-bottom: 10px; }

/* ---------- Geçici şifre ve uzun metin ---------- */
.sifre {
    font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace;
    letter-spacing: 0.14em; text-align: center;
    padding: 14px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid var(--accent-line);
    user-select: all;
}
.metin { max-height: 50vh; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: var(--fs-sm); }

/* ---------- Ders tipi renkleri (satır içi stil yasak; uygulama\program.php DERS_RENKLERI) ---------- */
.renk-turuncu { --c: #f97316; }
.renk-turkuaz { --c: #14b8a6; }
.renk-mor { --c: #8b5cf6; }
.renk-mavi { --c: #3b82f6; }
.renk-pembe { --c: #ec4899; }
.renk-yesil { --c: #22c55e; }
.renk-gri { --c: #94a3b8; }
.renk-secimi { display: flex; gap: 10px; flex-wrap: wrap; }
.renk-secimi label { position: relative; display: block; }
.renk-secimi input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.renk-secimi .swatch { display: block; background: var(--c); }
.renk-secimi input:checked + .swatch { outline: 2px solid var(--fg); }
.renk-secimi input:focus-visible + .swatch { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
fieldset.invalid { border-color: var(--bad); }

/* ---------- Haftalık şablon ---------- */
.row.sablon-gun { align-items: flex-start; }
.sablon-gun-adi { width: 88px; flex: none; font-weight: 650; padding-top: 2px; }
.sablon-satirlari { display: flex; flex-direction: column; gap: 6px; white-space: normal; }
a.sablon-satiri { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; text-decoration: none; border-radius: 8px; }
a.sablon-satiri:hover .type-chip { border-color: var(--accent-line); }
a.sablon-satiri.pasif { opacity: 0.55; }
.atlanan-listesi { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Takvim ---------- */
.tur-randevu { --c: var(--accent); }
.tur-ders { --c: var(--info); }
.session.iptal, .wg-item.iptal { opacity: 0.55; }
.day-btn .num { font-size: 0.7rem; font-weight: 600; }
.wg-item .t.uyari-yazi { color: var(--warn); font-weight: 650; }
a.kisi-baglanti { color: inherit; text-decoration: none; }
a.kisi-baglanti:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.panel-head .btn svg { width: 16px; height: 16px; }
/* Koçun Derslerim ekranı: ders bloğu ders tipinin rengiyle (demodaki sol çizgi). */
.panel.ders-blok { border-left: 4px solid var(--c); }
.ders-blok .panel-head a.stack { gap: 2px; }
.stat-value.stat-metin { font-size: var(--fs-md); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ders-sayisi { font-weight: 650; }
.spread.wrap-satir { flex-wrap: wrap; }
.banner form { flex: none; }
/* Geniş ekranda haftalık ızgara gösterilir (tasarim.css .week-grid); gün/hafta düğmeleri yalnızca dar ekranda anlamlı. */
.yalniz-genis { display: none; }
@media (min-width: 1100px) {
    .yalniz-dar { display: none; }
    .yalniz-genis { display: inline-flex; }
    h2.yalniz-genis { display: block; }
}
.bar > span.d0 { width: 0; }
.bar > span.d1 { width: 10%; }
.bar > span.d2 { width: 20%; }
.bar > span.d3 { width: 30%; }
.bar > span.d4 { width: 40%; }
.bar > span.d5 { width: 50%; }
.bar > span.d6 { width: 60%; }
.bar > span.d7 { width: 70%; }
.bar > span.d8 { width: 80%; }
.bar > span.d9 { width: 90%; }
.bar > span.d10 { width: 100%; }
.gun-baslik { display: flex; align-items: center; gap: 8px; }
.week-head .bosluk { flex: 1; }

/* ---------- Ölçüm grafiği (sunucuda çizilen SVG) ---------- */
.grafik { width: 100%; max-width: 560px; height: auto; display: block; }
.grafik .eksen { stroke: var(--line); stroke-width: 1; }
.grafik .cizgi { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.grafik .nokta { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.grafik text { font-size: 10px; fill: var(--muted); }
.olcum-grubu { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.olcum-grubu + .olcum-grubu { border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- Ölçüm tablosu (kâğıttaki form, M4) ---------- */
.olcum-tablosu + .olcum-tablosu { margin-top: 14px; }
.olcum-tablosu caption { caption-side: top; text-align: left; padding: 0 0 6px; font-weight: 750; color: var(--fg); }
.olcum-tablosu tbody th { color: var(--fg); font-size: var(--fs-sm); font-weight: 650; text-transform: none; letter-spacing: 0; }
.olcum-tablosu tbody th .birim { color: var(--muted); font-weight: 500; }
/* Telefonda tablo yana kayarken ölçüm adı görünür kalır. */
.olcum-tablosu th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.olcum-tablosu tr:last-child th { border-bottom: 0; }
.olcum-tablosu thead a { color: var(--accent-ink); }
.olcum-ust { margin: 4px 0 6px; }
.panel-head.wrap-satir { flex-wrap: wrap; }
.olcum-girisi { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .olcum-girisi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Sağlık notları ---------- */
.not-metni { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Ayarlar ---------- */
/* Hazır renkler: satır içi stil yasak (CSP) olduğu için her renk kendi sınıfıyla (MARKA_RENKLERI, uygulama/isletme.php). */
.swatch.sw-ffd400 { --sw: #ffd400; }
.swatch.sw-0f766e { --sw: #0f766e; }
.swatch.sw-2563eb { --sw: #2563eb; }
.swatch.sw-7c3aed { --sw: #7c3aed; }
.swatch.sw-be185d { --sw: #be185d; }
.swatch.sw-c2410c { --sw: #c2410c; }
.swatch.sw-15803d { --sw: #15803d; }
.swatch.sw-334155 { --sw: #334155; }
.ayar-sutun { gap: 18px; }
.marka-satir { align-items: flex-start; }
.marka-onizleme { flex: none; width: 112px; height: 64px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 8px; }
.marka-onizleme.kare { width: 64px; }
.marka-onizleme.zemin-koyu { background: #141414; }
.marka-onizleme.zemin-acik { background: #ffffff; }
.marka-onizleme img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.marka-satir .row-main { white-space: normal; display: flex; flex-direction: column; gap: 6px; }
.marka-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.marka-form input[type="file"] { font-size: var(--fs-xs); color: var(--muted); max-width: 100%; min-width: 0; }
.marka-form input[type="file"]::file-selector-button {
    font: inherit; font-weight: 650; color: var(--fg); background: var(--surface-2);
    border: 1px solid var(--line); border-radius: 10px; padding: 6px 11px; margin-right: 8px; cursor: pointer;
}
.marka-form input[type="file"]::file-selector-button:hover { border-color: var(--accent-line); }
/* ---------- Pano ve raporlar: grafik ---------- */
/* Satır içi stil yasak (CSP) olduğu için sütun yüksekliği ve çubuk genişliği %5'lik sınıflarla (raporlar.php oran_sinifi). */
.col-bar { height: var(--oran, 0%); }
.hbar-fill { display: block; width: var(--oran, 0%); }
.oran-0 { --oran: 0%; }
.oran-5 { --oran: 5%; }
.oran-10 { --oran: 10%; }
.oran-15 { --oran: 15%; }
.oran-20 { --oran: 20%; }
.oran-25 { --oran: 25%; }
.oran-30 { --oran: 30%; }
.oran-35 { --oran: 35%; }
.oran-40 { --oran: 40%; }
.oran-45 { --oran: 45%; }
.oran-50 { --oran: 50%; }
.oran-55 { --oran: 55%; }
.oran-60 { --oran: 60%; }
.oran-65 { --oran: 65%; }
.oran-70 { --oran: 70%; }
.oran-75 { --oran: 75%; }
.oran-80 { --oran: 80%; }
.oran-85 { --oran: 85%; }
.oran-90 { --oran: 90%; }
.oran-95 { --oran: 95%; }
.oran-100 { --oran: 100%; }
.chart-cols .col { font: inherit; }

/* ---------- Adaylar ---------- */
.secim-satiri { cursor: pointer; }
.secim-satiri input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
/* ---------- Paket bitiyor uyarısı (M1) ---------- */
/* Bant simgesi vurgu renginde; düğmelerin simgeleri düğmenin yazı rengini alır. */
.banner .btn svg { color: currentColor; width: 16px; height: 16px; margin-top: 0; }
.yenileme-uyarisi .btn-row { margin-top: 4px; }