/* Likya Havuz — Takvim, randevu sihirbazı, pano, hesabım (Ajan 1). Yalnız tema değişkenleri; eğitmen rengi --renk ile gelir. */

/* ---------- Genel yardımcılar */
.orta { text-align: center; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
p.orta { display: block; }
.kucuk-yazi { font-size: .82rem; }
.renk-nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--renk, var(--soluk)); flex: none; vertical-align: middle; box-shadow: 0 0 0 2px color-mix(in srgb, var(--renk, var(--soluk)) 25%, transparent); }
.kv { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--cizgi); }
.kv:last-child { border-bottom: 0; }
.kv-ad { width: 110px; flex: none; color: var(--soluk); font-size: .88rem; }
.kv-deger { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ozet-kutu { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: var(--r-k); padding: 6px 14px; margin-bottom: 14px; }
.not-kutu { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--r-k); margin: 8px 0 12px; background: color-mix(in srgb, var(--mavi) 10%, transparent); border-left: 4px solid var(--mavi); }
.not-kutu.yesil { background: color-mix(in srgb, var(--yesil) 12%, transparent); border-left-color: var(--yesil); }
.not-kutu.sari { background: color-mix(in srgb, var(--sari) 13%, transparent); border-left-color: var(--sari); }
.not-kutu.kirmizi { background: color-mix(in srgb, var(--kirmizi) 11%, transparent); border-left-color: var(--kirmizi); }
.kanal-secim { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 6px; }
.kaynak-secim { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.btn.buyuk { min-height: 54px; padding: 10px 18px; font-size: 1rem; }
.btn.dev { min-height: 64px; padding: 14px 28px; font-size: 1.15rem; border-radius: 16px; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--vurgu) 70%, transparent); }
.btn.tehlike-metin { color: var(--kirmizi); }
b.eksi { color: var(--kirmizi); } b.arti { color: var(--yesil); }
h4 { margin: 14px 0 6px; font-size: .95rem; }

/* ---------- Randevu sihirbazı */
.sihirbaz { display: flex; flex-direction: column; gap: 10px; min-height: 340px; }
.adimlar { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 4px; overflow-x: auto; scrollbar-width: none; }
.adimlar::-webkit-scrollbar { display: none; }
.adimlar li { flex: 1; min-width: 0; }
.adimlar button { width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-bottom: 3px solid var(--cizgi); background: transparent; color: var(--soluk); font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.adimlar button:disabled { cursor: default; }
.adim-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--zemin2); font-weight: 700; font-size: .78rem; flex: none; }
.adimlar li.aktif button { color: var(--metin); border-bottom-color: var(--vurgu); font-weight: 700; }
.adimlar li.aktif .adim-no { background: var(--vurgu); color: var(--vurgu-metin); }
.adimlar li.tamam button { color: var(--metin); border-bottom-color: color-mix(in srgb, var(--vurgu) 45%, transparent); }
.adimlar li.tamam .adim-no { background: color-mix(in srgb, var(--vurgu) 25%, transparent); }
.sihirbaz-kim { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.sihirbaz-govde { flex: 1; }
.sihirbaz-alt { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cizgi); position: sticky; bottom: -16px; background: var(--yuzey-kati); padding-bottom: 4px; }
.secili-uye { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-k); background: var(--zemin); }
.paket-liste, .egitmen-liste { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.paket-secim, .egitmen-secim { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px 14px; border-radius: var(--r-k); border: 2px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; cursor: pointer; transition: border-color var(--gecis), transform var(--gecis); }
.egitmen-secim { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
.paket-secim:hover, .egitmen-secim:hover { border-color: color-mix(in srgb, var(--vurgu) 50%, var(--cizgi)); }
.paket-secim.secili, .egitmen-secim.secili { border-color: var(--vurgu); background: color-mix(in srgb, var(--vurgu) 8%, var(--yuzey-kati)); }
.paket-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.paket-kredi b { font-size: 1.5rem; color: var(--vurgu); }
.paket-kredi span { color: var(--soluk); }
.paket-alt { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--soluk); }
.kisi-liste { display: flex; flex-direction: column; gap: 8px; }
.kulvar-sayi { display: flex; flex-wrap: wrap; gap: 8px; }
.secim-dugme { min-width: 52px; min-height: 48px; border-radius: 12px; border: 2px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.secim-dugme.secili { border-color: var(--vurgu); background: var(--vurgu); color: var(--vurgu-metin); }
.gun-serit-kap { display: flex; align-items: center; gap: 4px; }
.gun-serit { flex: 1; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.gun-secim { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 6px 0; border-radius: 12px; border: 2px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; cursor: pointer; scroll-snap-align: start; }
.gun-secim b { font-size: 1.2rem; line-height: 1.2; }
.gun-secim small { font-size: .7rem; color: var(--soluk); }
.gun-secim.bugun { border-color: color-mix(in srgb, var(--vurgu) 50%, var(--cizgi)); }
.gun-secim.secili { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.gun-secim.secili small { color: inherit; opacity: .85; }
.gun-secim:disabled { opacity: .35; cursor: not-allowed; }
/* Grup formundaki gün kutusu grubu (div.gun-secim, giris.css) bu buton stilini almamalı */
div.gun-secim { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: default; }
.saat-izgara { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.saat-secim { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--vurgu) 35%, var(--cizgi)); background: var(--yuzey-kati); color: var(--metin); font: inherit; cursor: pointer; transition: background var(--gecis); }
.saat-secim b { font-size: 1.05rem; }
.saat-secim small { font-size: .68rem; color: var(--soluk); text-align: center; line-height: 1.15; }
.saat-secim:hover:not(:disabled) { background: color-mix(in srgb, var(--vurgu) 10%, var(--yuzey-kati)); }
.saat-secim.secili { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.saat-secim.secili small { color: inherit; }
.saat-secim.dolu { opacity: .45; border-style: dashed; border-color: var(--cizgi); cursor: not-allowed; background: var(--zemin); }

/* ---------- Rezervasyon detayı / yoklama */
.rez-detay-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.rez-no { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.yoklama-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.yoklama-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--r-k); background: var(--zemin); }
.yoklama-ad { display: flex; flex-direction: column; }
.yoklama-dugmeler { display: flex; gap: 6px; }
.yoklama-btn { min-height: 44px; min-width: 84px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; font-weight: 700; cursor: pointer; }
.yoklama-btn.geldi.aktif { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.yoklama-btn.gelmedi.aktif { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.yoklama-btn.haberli.aktif { background: var(--sari); border-color: var(--sari); color: #fff; }

/* ---------- Takvim çubuğu */
.takvim-cubuk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.takvim-cubuk .sekmeler { margin-bottom: 0; }
.takvim-gezinti { display: flex; align-items: center; gap: 4px; }
.takvim-baslik { margin-left: 6px; font-size: 1.05rem; white-space: nowrap; }
.takvim-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.takvim-filtre input[type="date"], .takvim-filtre select { width: auto; min-width: 150px; }
.tasima-bandi { position: sticky; top: 64px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 10px; border-radius: var(--r-k); background: var(--vurgu); color: var(--vurgu-metin); font-weight: 600; box-shadow: var(--golge); }
.tasima-bandi[hidden] { display: none; }
.gun-bilgi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bilgi-cip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--yuzey); border: 1px solid var(--cizgi); font-size: .82rem; }
.bilgi-cip.kapali { border-color: color-mix(in srgb, var(--kirmizi) 50%, var(--cizgi)); color: var(--kirmizi); }

/* ---------- Günlük kulvar ızgarası */
.gun-kap { max-height: calc(100vh - 230px); min-height: 360px; overflow: auto; border-radius: var(--r); border: 1px solid var(--cizgi); background: var(--yuzey-kati); box-shadow: var(--golge); position: relative; -webkit-overflow-scrolling: touch; isolation: isolate; }
.gun-izgara { --bas-yuk: 44px; --saat-gen: 62px; display: grid; grid-template-columns: var(--saat-gen) repeat(var(--kulvar), minmax(120px, 1fr)); grid-template-rows: var(--bas-yuk) auto; position: relative; min-width: calc(var(--saat-gen) + var(--kulvar) * 120px); }
.gun-kose, .kulvar-bas { position: sticky; top: 0; z-index: 6; height: var(--bas-yuk); display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--yuzey-kati); border-bottom: 2px solid var(--cizgi); font-weight: 700; font-size: .88rem; }
.gun-kose { left: 0; z-index: 8; color: var(--soluk); border-right: 1px solid var(--cizgi); }
.kulvar-bas { border-left: 1px solid var(--cizgi); background: linear-gradient(180deg, var(--yuzey-kati), color-mix(in srgb, var(--su1) 18%, var(--yuzey-kati))); }
.kulvar-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-metin); font-size: .8rem; font-weight: 700; }
.saat-sutun { position: sticky; left: 0; z-index: 5; background: var(--yuzey-kati); border-right: 1px solid var(--cizgi); }
.saat-etiket { box-sizing: border-box; padding: 2px 8px 0 0; text-align: right; font-size: .75rem; color: var(--soluk); font-variant-numeric: tabular-nums; border-top: 1px solid transparent; }
.saat-etiket.tam { color: var(--metin); font-weight: 700; border-top-color: var(--cizgi); }
.kulvar-sutun { position: relative; border-left: 1px solid var(--cizgi); }
.kulvar-sutun:nth-of-type(even) { background: color-mix(in srgb, var(--su1) 5%, transparent); }
.hucre { display: block; width: 100%; box-sizing: border-box; border: 0; border-top: 1px solid color-mix(in srgb, var(--cizgi) 60%, transparent); background: transparent; padding: 0; margin: 0; cursor: pointer; font: inherit; }
.hucre:hover { background: color-mix(in srgb, var(--vurgu) 9%, transparent); }
.hucre.gecmis { background: color-mix(in srgb, var(--soluk) 6%, transparent); }
.hucre:focus-visible { outline-offset: -3px; }
body:not(.masaustu) .hucre { -webkit-tap-highlight-color: transparent; }
.tasima-modu .hucre { background: color-mix(in srgb, var(--vurgu) 6%, transparent); }
.tasima-modu .hucre:hover, .hucre.birak-hedef { background: color-mix(in srgb, var(--vurgu) 28%, transparent) !important; box-shadow: inset 0 0 0 2px var(--vurgu); }
.kapali-dilim { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--kirmizi) 16%, transparent) 0 8px, color-mix(in srgb, var(--kirmizi) 4%, transparent) 8px 16px);
  border-top: 2px solid color-mix(in srgb, var(--kirmizi) 50%, transparent); }
.kapali-dilim.bakim { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sari) 22%, transparent) 0 8px, color-mix(in srgb, var(--sari) 5%, transparent) 8px 16px); border-top-color: var(--sari); }
.kapali-dilim span { font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--yuzey-kati); color: var(--soluk); }
.egitmen-mesgul { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--soluk) 10%, transparent) 0 4px, transparent 4px 10px); }
.simdi-cizgi { position: absolute; left: var(--saat-gen); right: 0; height: 0; border-top: 2px solid var(--kirmizi); z-index: 7; pointer-events: none; }
.simdi-cizgi span { position: absolute; left: calc(-1 * var(--saat-gen)); top: -10px; width: calc(var(--saat-gen) - 4px); text-align: right; font-size: .7rem; font-weight: 800; color: var(--kirmizi); }
.simdi-cizgi::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--kirmizi); }

/* Rezervasyon bloğu */
.rez-blok { --renk: var(--vurgu); position: absolute; left: 3px; right: 3px; z-index: 3; display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 4px 7px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(160deg, color-mix(in srgb, var(--renk) 26%, var(--yuzey-kati)), color-mix(in srgb, var(--renk) 14%, var(--yuzey-kati)));
  border: 1px solid color-mix(in srgb, var(--renk) 55%, transparent); border-left: 5px solid var(--renk); color: var(--metin);
  box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--renk) 60%, transparent); transition: transform var(--gecis), box-shadow var(--gecis), opacity var(--gecis); font-size: .8rem; line-height: 1.25; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rez-blok:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--renk) 70%, transparent); z-index: 4; }
.rez-blok[draggable="true"] { cursor: grab; }
.blok-saat { font-size: .7rem; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
.blok-ad { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blok-alt { font-size: .72rem; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blok-durum, .blok-kulvar { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.rez-blok.kisa { flex-direction: row; align-items: center; gap: 6px; padding: 2px 6px; }
.rez-blok.kisa .blok-alt, .rez-blok.kisa .blok-durum, .rez-blok.kisa .blok-kulvar { display: none; }
.rez-blok.durum-tamamlandi { border-left-style: double; }
.rez-blok.durum-tamamlandi::after { content: "✓"; position: absolute; right: 6px; top: 3px; font-weight: 800; color: var(--yesil); }
.rez-blok.durum-onay_bekliyor { border-left-style: dashed; }
.rez-blok.durum-iptal { opacity: .55; background: repeating-linear-gradient(-45deg, var(--zemin2) 0 6px, var(--yuzey-kati) 6px 12px); border-left-color: var(--soluk); }
.rez-blok.durum-iptal .blok-ad { text-decoration: line-through; }
.rez-blok.maskeli { cursor: default; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--soluk) 22%, transparent) 0 6px, color-mix(in srgb, var(--soluk) 12%, transparent) 6px 12px); border: 1px solid color-mix(in srgb, var(--soluk) 35%, transparent); border-left: 5px solid var(--soluk); box-shadow: none; color: var(--soluk); }
.rez-blok.maskeli:hover { transform: none; }
.rez-blok.soluk-blok, .hafta-oge.soluk-blok { opacity: .3; filter: saturate(.3); }
.rez-blok.surukleniyor { opacity: .35; }
.suruklemede .rez-blok, .suruklemede .rez-blok.surukleniyor { pointer-events: none; }
.salt-okunur .hucre { cursor: default; }
.salt-okunur .hucre:hover { background: transparent; }
.rez-blok.tasiniyor { outline: 3px solid var(--vurgu); outline-offset: 1px; animation: titre 1s infinite ease-in-out; z-index: 5; }
.rez-blok.bekliyor { opacity: .5; pointer-events: none; }
@keyframes titre { 0%, 100% { transform: scale(1); } 50% { transform: scale(.97); } }

/* ---------- Haftalık */
.hafta-kap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.hafta-izgara { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 8px; min-width: 1000px; }
.hafta-gun { display: flex; flex-direction: column; min-height: 320px; border-radius: var(--r); border: 1px solid var(--cizgi); background: var(--yuzey); overflow: hidden; }
.hafta-gun.bugun { border-color: var(--vurgu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 30%, transparent); }
.hafta-gun.kapali { opacity: .6; }
.hafta-bas { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; text-align: left; cursor: pointer; }
.hafta-bas b { font-size: 1.35rem; justify-self: end; }
.hafta-gun-ad { font-weight: 700; color: var(--soluk); }
.hafta-bas small { grid-column: 1 / -1; color: var(--soluk); font-size: .74rem; }
.doluluk-cubuk { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--zemin2); overflow: hidden; }
.doluluk-cubuk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--su1), var(--su2)); }
.hafta-liste { display: flex; flex-direction: column; gap: 5px; padding: 6px; overflow-y: auto; max-height: 560px; }
.hafta-oge { --renk: var(--vurgu); display: flex; flex-direction: column; gap: 0; text-align: left; padding: 5px 8px; border-radius: 8px; border: 0; border-left: 4px solid var(--renk); background: color-mix(in srgb, var(--renk) 15%, var(--yuzey-kati)); color: var(--metin); font: inherit; font-size: .78rem; cursor: pointer; }
.hafta-oge small { color: var(--soluk); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hafta-oge.maskeli { flex-direction: row; gap: 6px; border-left-color: var(--soluk); background: color-mix(in srgb, var(--soluk) 12%, transparent); color: var(--soluk); cursor: default; }
.hafta-oge.durum-tamamlandi { opacity: .75; }

/* ---------- Aylık: su seviyesi hücreleri */
.ay-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ay-gun-ad { text-align: center; font-size: .78rem; font-weight: 700; color: var(--soluk); padding: 4px 0; }
.ay-hucre { --doluluk: 0; position: relative; overflow: hidden; aspect-ratio: 1 / .82; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey-kati); color: var(--metin); font: inherit; text-align: left; cursor: pointer; isolation: isolate; transition: transform var(--gecis), box-shadow var(--gecis); }
.ay-hucre:hover { transform: translateY(-2px); box-shadow: var(--golge); }
.ay-hucre.bugun { border: 2px solid var(--vurgu); }
.ay-hucre.gecmis { filter: saturate(.55); }
.ay-hucre.kapali { background: repeating-linear-gradient(-45deg, var(--zemin2) 0 6px, var(--yuzey-kati) 6px 12px); color: var(--soluk); }
.ay-su { position: absolute; left: -10%; right: -10%; bottom: 0; z-index: -1; height: calc(var(--doluluk) * 1%); min-height: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--su1) 75%, transparent), color-mix(in srgb, var(--su2) 85%, transparent) 70%, var(--su3)); transition: height .6s ease; }
.ay-su::before, .ay-su::after { content: ""; position: absolute; left: 0; width: 200%; height: 12px; top: -11px;
  background: radial-gradient(10px 7px at 10px 12px, color-mix(in srgb, var(--su1) 75%, transparent) 98%, transparent 100%) 0 0 / 20px 12px repeat-x;
  animation: dalga 4s linear infinite; }
.ay-su::after { opacity: .5; top: -9px; animation-duration: 6.5s; animation-direction: reverse; }
.ay-su.bos::before, .ay-su.bos::after { display: none; }
/* .bos genel boş-durum bileşeniyle çakışır (padding 36px → %0 gün dolu görünüyordu) */
.ay-su.bos { display: block; padding: 0; height: 0; }
@keyframes dalga { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ay-tarih { font-weight: 800; font-size: 1.05rem; }
.ay-yuzde { font-weight: 800; font-size: .9rem; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--yuzey-kati) 75%, transparent); }
.ay-sayi { font-size: .7rem; font-weight: 600; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, var(--yuzey-kati) 75%, transparent); }
.ay-lejant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: .8rem; color: var(--soluk); }
.lejant-oge { display: inline-flex; align-items: center; gap: 4px; }
.lejant-kutu { --doluluk: 0; position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--cizgi); background: var(--yuzey-kati); isolation: isolate; }
.lejant-kutu .ay-su::before, .lejant-kutu .ay-su::after { display: none; }

/* ---------- Pano */
.pano-tarih { margin-right: auto; }
.sayfa-bas h1:has(+ .pano-tarih) { margin-right: 4px; }
.sayfa-bas .pano-tarih + .btn, .sayfa-bas h1 + .pano-tarih { margin-left: 0; }
.pano-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pano-izgara .kart { margin-bottom: 0; }
.pano-kutu.genis { grid-column: 1 / -1; }
.pano-kutu-bas { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pano-kutu-bas h2 { margin: 0; margin-right: auto; font-size: 1.02rem; }
.pano-arac { display: flex; align-items: center; gap: 2px; }
.ok-ikon { font-size: .8rem; }
.duzenleniyor .pano-kutu { border-style: dashed; border-width: 2px; }
.pano-kutu.gizli-kutu { opacity: .5; }
.hizli-islemler { display: flex; flex-wrap: wrap; gap: 10px; }
.hizli-islemler .btn { flex: 1 1 180px; min-width: 0; }
@media (max-width: 640px) { .hizli-islemler .btn { flex-basis: calc(50% - 5px); } }
.pano-liste { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow-y: auto; }
.pano-alt-baslik { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); margin: 10px 0 4px; }
.pano-alt-baslik:first-child { margin-top: 0; }
.pano-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-k); background: transparent; color: var(--metin); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.pano-satir:hover { background: var(--zemin2); }
.pano-satir.statik { cursor: default; } .pano-satir.statik:hover { background: transparent; }
.pano-saat { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pano-ad { font-weight: 600; flex: 1; min-width: 100px; }
.pano-satir small { flex-basis: auto; }
.pano-satir > :last-child { margin-left: auto; }
.satir-arac { display: inline-flex; gap: 6px; align-items: center; }
.mini-ozet { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-bottom: 12px; }
.mini-kap { overflow-x: auto; padding-bottom: 4px; }
.mini-izgara { display: grid; grid-template-columns: 34px repeat(var(--sutun), minmax(22px, 1fr)); gap: 3px; min-width: calc(34px + var(--sutun) * 25px); }
.mini-saat, .mini-kulvar { font-size: .68rem; color: var(--soluk); text-align: center; align-self: center; font-variant-numeric: tabular-nums; }
.mini-kulvar { font-weight: 700; text-align: left; }
.mini-hucre { --renk: var(--vurgu); height: 22px; border-radius: 5px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--su1) 20%, var(--yuzey-kati)); }
.mini-hucre.dolu { background: var(--renk); }
.mini-hucre.kapali { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--kirmizi) 30%, transparent) 0 3px, transparent 3px 6px); }
.mini-hucre.simdi { box-shadow: inset 0 0 0 2px var(--kirmizi); }

/* ---------- Hesabım (müşteri) */
.hesabim-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; position: relative; overflow: hidden;
  background: linear-gradient(120deg, color-mix(in srgb, var(--su1) 30%, var(--yuzey)), var(--yuzey) 60%); }
.hesabim-hero h1 { margin-bottom: 4px; }
.hesabim-hero p { margin: 0; }
.hero-uyari { display: flex; flex-direction: column; gap: 2px; max-width: 320px; }
.hesabim-izgara { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.randevu-liste { display: flex; flex-direction: column; gap: 8px; }
.randevu-kart { --renk: var(--vurgu); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-k); background: var(--yuzey-kati); border: 1px solid var(--cizgi); border-left: 5px solid var(--renk); }
.randevu-kart.durum-iptal { opacity: .7; border-left-color: var(--soluk); }
.randevu-liste.gecmis .randevu-kart { background: transparent; }
.randevu-tarih { display: flex; flex-direction: column; align-items: center; width: 50px; flex: none; line-height: 1.1; }
.randevu-tarih b { font-size: 1.4rem; }
.randevu-tarih span, .randevu-tarih small { font-size: .72rem; color: var(--soluk); text-transform: uppercase; }
.randevu-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.randevu-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.randevu-arac { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.paket-izgara { display: flex; flex-direction: column; gap: 10px; }
.paket-kart { display: flex; gap: 12px; padding: 12px; border-radius: var(--r-k); background: var(--yuzey-kati); border: 1px solid var(--cizgi); }
.paket-kart.pasif { opacity: .6; }
.paket-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kredi-olcer { --doluluk: 0; position: relative; flex: none; width: 46px; height: 74px; border-radius: 10px 10px 14px 14px; border: 2px solid color-mix(in srgb, var(--su2) 55%, var(--cizgi)); background: var(--zemin); overflow: hidden; isolation: isolate; }
.kredi-su { position: absolute; left: -20%; right: -20%; bottom: 0; height: calc(var(--doluluk) * 1%); z-index: -1; background: linear-gradient(180deg, var(--su1), var(--su2) 70%, var(--su3)); transition: height .8s ease; }
.kredi-su::before { content: ""; position: absolute; left: 0; width: 200%; top: -7px; height: 8px; background: radial-gradient(7px 5px at 7px 8px, var(--su1) 98%, transparent 100%) 0 0 / 14px 8px repeat-x; animation: dalga 3s linear infinite; }
.iptal-hakki { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cizgi); font-size: .9rem; }

/* ---------- Duyarlı */
@media (max-width: 900px) {
  .pano-izgara { grid-template-columns: minmax(0, 1fr); }
  .hesabim-izgara { grid-template-columns: minmax(0, 1fr); }
  .gun-kap { max-height: calc(100vh - 210px); }
  .takvim-filtre { margin-left: 0; }
}
@media (max-width: 640px) {
  .takvim-cubuk { gap: 8px; }
  .takvim-cubuk .sekmeler { width: 100%; }
  .takvim-cubuk .sekme { flex: 1; }
  .takvim-filtre { width: 100%; }
  .takvim-filtre input[type="date"], .takvim-filtre select { flex: 1; min-width: 0; }
  .gun-izgara { --saat-gen: 48px; grid-template-columns: var(--saat-gen) repeat(var(--kulvar), minmax(96px, 1fr)); min-width: calc(var(--saat-gen) + var(--kulvar) * 96px); }
  .saat-etiket { padding-right: 4px; font-size: .68rem; }
  .gun-kap { max-height: calc(100vh - 250px); min-height: 300px; }
  .rez-blok { padding: 3px 5px; font-size: .74rem; }
  .ay-izgara { gap: 3px; }
  .ay-hucre { aspect-ratio: 1 / 1.1; min-height: 48px; padding: 4px; border-radius: 8px; }
  .ay-tarih { font-size: .9rem; }
  .ay-yuzde { font-size: .68rem; padding: 0 3px; }
  .ay-sayi { display: none; }
  .kv-ad { width: 86px; }
  .saat-izgara { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .yoklama-dugmeler { width: 100%; }
  .yoklama-btn { flex: 1; min-width: 0; }
  .randevu-kart { flex-wrap: wrap; }
  .randevu-arac { width: 100%; }
  .randevu-arac .btn { flex: 1; }
  .hesabim-hero .btn.dev { width: 100%; }
  .sihirbaz-alt .btn { flex: 1; }
  .adim-ad { display: none; }
  .adimlar li.aktif .adim-ad { display: inline; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .adimlar li { flex: 0 0 auto; }
  .adimlar li.aktif { flex: 1 1 auto; }
  .adimlar li:not(.aktif) button { width: auto; padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ay-su::before, .ay-su::after, .kredi-su::before, .rez-blok.tasiniyor { animation: none; } }

/* ================================================================ GÜNLÜK: KUŞBAKIŞI YATAY HAVUZ */
.hv-kap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.hv-zemin { --ip-k: #c8102e; --ip-m: #1e5aa8; padding: 14px 18px 18px; border-radius: 24px;
  background-color: color-mix(in srgb, var(--zemin2) 80%, #d9e2e7);
  background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 22px 22px; box-shadow: inset 0 0 0 1px var(--cizgi), var(--golge); width: fit-content; min-width: 100%; box-sizing: border-box; }
.hv-havuz { position: relative; }
.hv-saatler { position: relative; height: 28px; margin-left: 62px; container-type: inline-size; }
@container (max-width: 1250px) { .hv-saat:not(.tam) { display: none; } }
.hv-saatler.kucuk { height: 22px; margin-left: 58px; }
.hv-saat { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--soluk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hv-saat.tam { font-size: 13px; font-weight: 700; color: var(--metin); }
.hv-govde { display: flex; }
.hv-bloklar { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 6px 0; position: sticky; left: 0; z-index: 8; }
.hv-blok { width: 54px; height: 104px; box-sizing: border-box; border-radius: 9px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px #b9d3de, 0 2px 4px rgba(0,40,70,.12); color: #0b4f6c; }
.hv-blok b { font-family: var(--baslik-font, inherit); font-size: 26px; line-height: 1; }
.hv-blok small { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #5a7d8d; }
.hv-blok.yakin { width: 50px; height: 116px; }
.hv-su { position: relative; flex: 1; padding: 6px 0; border-radius: 6px 14px 14px 6px; overflow: hidden;
  background: radial-gradient(ellipse 140px 40px at 18% 30%, rgba(255,255,255,.2), transparent 70%), radial-gradient(ellipse 180px 50px at 62% 72%, rgba(255,255,255,.16), transparent 70%),
    linear-gradient(180deg, #8fdcf2 0%, #4cb5df 55%, #2f9bd0 100%);
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #9cc9db, inset 0 10px 30px rgba(0,60,100,.25); }
.hv-su.yakin { padding: 0; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #9cc9db; }
.hv-dilim { position: absolute; top: 6px; bottom: 6px; width: 0; border-left: 1px dashed rgba(255,255,255,.55); pointer-events: none; z-index: 1; }
.hv-dilim.tam { border-left: 2px solid rgba(255,255,255,.75); }
.hv-kulvar { position: relative; height: 104px; margin: 0; }
.hv-kulvar.yakin { height: 116px; margin: 0; }
.hv-taban { position: absolute; left: 22px; right: 22px; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: #154e72; opacity: .5; pointer-events: none; }
.hv-taban::after { content: ""; position: absolute; right: 0; top: -10px; width: 4px; height: 24px; background: inherit; }
.hv-ip { height: 8px; margin: 0 6px; border-radius: 4px; position: relative; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--ip-k) 0 14px, #fff 14px 21px, var(--ip-m) 21px 35px, #fff 35px 42px); box-shadow: 0 1px 2px rgba(0,40,70,.35); }
.hv-ip.ust, .hv-ip.alt { position: absolute; left: 0; right: 0; margin: 0; border-radius: 0; }
.hv-ip.ust { top: 0; } .hv-ip.alt { bottom: 0; }
.hv-bos { position: absolute; top: 4px; bottom: 4px; border: 0; padding: 0; margin: 0; border-radius: 6px; background: transparent; cursor: pointer; z-index: 1; }
.hv-bos:hover, .hv-bos:focus-visible { background: rgba(255,255,255,.3); }
.hv-bos.gecmis { background: rgba(10,40,60,.12); }
.salt-okunur .hv-bos { cursor: default; } .salt-okunur .hv-bos:hover { background: transparent; }
.tasima-modu .hv-bos { background: rgba(255,255,255,.12); }
.tasima-modu .hv-bos:hover { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 2px #fff; }
.hv-hedef { position: absolute; top: 6px; bottom: 6px; z-index: 6; border-radius: 10px; border: 3px dashed #fff; background: rgba(255,255,255,.35); pointer-events: none; }
.hv-kapama { position: absolute; top: 3px; bottom: 3px; z-index: 2; border-radius: 8px; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; overflow: hidden; }
.hv-kapama span { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.9); color: #36414b; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.hv-kapama.kapali { background: repeating-linear-gradient(135deg, rgba(90,104,115,.62) 0 8px, rgba(90,104,115,.42) 8px 16px); }
.hv-kapama.bakim { background: repeating-linear-gradient(135deg, rgba(242,193,46,.85) 0 9px, rgba(54,65,75,.75) 9px 19px); }
.hv-kapama.dis-blok { --renk: #c92a4b; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--renk) 30%, transparent) 0 8px, color-mix(in srgb, var(--renk) 12%, transparent) 8px 16px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--renk) 60%, transparent); }
.hv-mesgul { position: absolute; top: 0; bottom: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(10,40,60,.18) 0 4px, transparent 4px 10px); }
.hv-simdi { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; z-index: 7; background: var(--kirmizi); box-shadow: 0 0 0 2px rgba(255,255,255,.6); pointer-events: none; }
.hv-simdi span { position: absolute; top: 2px; left: 6px; font-size: 11px; font-weight: 800; color: #fff; background: var(--kirmizi); padding: 1px 6px; border-radius: 6px; }

/* ders kartı */
.hv-ders { --bg: #1d63c4; --fg: #fff; position: absolute; top: 8px; height: 88px; z-index: 4; box-sizing: border-box; padding: 5px 6px; container-type: inline-size; border-radius: 9px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; color: var(--fg); background: var(--bg);
  box-shadow: 0 4px 10px -4px rgba(3,30,48,.55), inset 0 0 0 1px rgba(255,255,255,.18); line-height: 1.15; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--gecis), box-shadow var(--gecis), opacity var(--gecis); }
.hv-ders:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(3,30,48,.6); z-index: 5; }
.hv-ders[draggable="true"] { cursor: grab; }
.hv-d-saat { font-size: 11px; font-weight: 700; opacity: .9; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hv-d-saat em { font-style: normal; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.25); font-size: 10px; }
.hv-d-ogr { font-size: 13px; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.hv-d-ogt { font-size: 11px; font-weight: 500; opacity: .92; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.hv-ders .kisa-ad { display: none; }
@container (max-width: 74px) { .hv-d-saat .bitis, .hv-d-saat em { display: none; } .hv-ders .tam-ad { display: none; } .hv-ders .kisa-ad { display: inline; } .hv-d-ogr { font-size: 10.5px; -webkit-line-clamp: 3; overflow-wrap: normal; word-break: normal; } .hv-d-ogt { font-size: 9.5px; overflow-wrap: normal; word-break: normal; } .hv-d-saat { font-size: 10px; } }
@container (max-width: 74px) { .hv-d-saat, .hv-d-ogr, .hv-d-ogt { margin-right: -3px; } }
.hv-ders.ozel { --bg: #1d63c4; }
.hv-ders.duet { --bg: #6d38d6; }
.hv-ders.grup { --bg: #0d7d56; }
.hv-ders.kiralama { --bg: #f2a72a; --fg: #3a2400; }
.hv-ders.dis { --bg: #c92a4b; background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 7px, transparent 7px 14px), var(--bg); }
.hv-ders.maskeli { --bg: rgba(90,104,115,.55); --fg: #fff; cursor: default; box-shadow: none; }
.hv-ders.maskeli:hover { transform: none; }
.hv-ders.durum-iptal { opacity: .5; background: repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px), var(--bg); }
.hv-ders.durum-iptal .hv-d-ogr { text-decoration: line-through; }
.hv-ders.durum-tamamlandi::after { content: "✓"; position: absolute; right: 6px; top: 4px; font-weight: 800; }
.hv-ders.durum-onay_bekliyor, .hv-ders.durum-talep { box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 4px 10px -4px rgba(3,30,48,.55); outline: 2px dashed rgba(255,255,255,.9); outline-offset: -5px; }
.hv-ders.soluk-blok { opacity: .3; filter: saturate(.3); }
.hv-ders.surukleniyor { opacity: .35; }
.hv-ders.tasiniyor { outline: 3px solid #fff; outline-offset: 2px; animation: hv-nabiz 1s ease-in-out infinite; }
@keyframes hv-nabiz { 50% { transform: translateY(-2px); } }
.hv-ders.komsu { opacity: .45; top: 18px; height: 80px; cursor: default; }
.hv-ders.ana { top: 14px; height: 88px; padding: 10px 14px; border-radius: 12px; box-shadow: 0 10px 22px -8px rgba(3,30,48,.6), 0 0 0 3px #fff; cursor: default; }
.hv-ders.ana:hover { transform: none; }
.hv-ders.ana .hv-d-saat { font-size: 13px; } .hv-ders.ana .hv-d-ogr { font-size: 20px; white-space: normal; } .hv-ders.ana .hv-d-ogt { font-size: 13px; font-weight: 600; }
.hv-ders.bos { --bg: rgba(255,255,255,.55); --fg: #053a52; border: 3px dashed #fff; box-shadow: none; }

/* lejant + detay penceresi */
.hv-lejant { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; align-items: center; margin-top: 10px; font-size: .85rem; }
.hv-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.hv-renk { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.hv-renk.ozel { background: #1d63c4; } .hv-renk.duet { background: #6d38d6; } .hv-renk.grup { background: #0d7d56; } .hv-renk.kiralama { background: #f2a72a; }
.hv-renk.dis { background: repeating-linear-gradient(135deg, rgba(255,255,255,.25) 0 3px, transparent 3px 6px), #c92a4b; }
.hv-renk.kapali { background: repeating-linear-gradient(135deg, #5a6873 0 3px, #8a97a3 3px 6px); }
.hv-renk.bakim { background: repeating-linear-gradient(135deg, #f2c12e 0 3px, #36414b 3px 7px); }
.hv-detay { display: flex; flex-direction: column; gap: 16px; }
.hv-zemin.yakin { padding: 10px 12px 12px; border-radius: 16px; min-width: 0; width: auto; }
.hv-bilgiler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hv-bilgi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--zemin2); min-width: 0; }
.hv-bilgi span { font-size: .78rem; font-weight: 600; color: var(--soluk); }
.hv-bilgi b { font-size: .95rem; overflow-wrap: anywhere; }
.btn.tehlike-cerceve { color: var(--kirmizi); border-color: color-mix(in srgb, var(--kirmizi) 45%, var(--cizgi)); }
@media (max-width: 640px) {
  .hv-bilgiler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-zemin { padding: 10px 10px 12px; border-radius: 16px; }
  .hv-blok { width: 42px; } .hv-saatler { margin-left: 50px; } .hv-bloklar { left: 0; background: color-mix(in srgb, var(--zemin2) 80%, #d9e2e7); }
}