/* Likya Havuz — Ajan 4b: karşılama/giriş ekranları, kod kutuları, grup dersleri.
   Renkler tema değişkenleriyle (app.css). Canlı su efekti Ajan 5'in water.js'inden gelir; yoksa aşağıdaki CSS dalgaları çalışır. */

/* ------------------------------------------------------------ KARŞILAMA SAHNESİ */
.karsilama-sayfa { min-height: 100vh; }
.karsilama { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--su1) 0%, var(--su2) 48%, var(--su3) 100%); }
.karsilama-su { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.karsilama-su::before { /* ışık kostikleri */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 40% 18% at 20% 30%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(ellipse 30% 14% at 70% 20%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(ellipse 35% 16% at 55% 65%, rgba(255,255,255,.14), transparent 70%),
    radial-gradient(ellipse 25% 12% at 15% 80%, rgba(255,255,255,.12), transparent 70%);
  animation: kostik 14s ease-in-out infinite alternate; mix-blend-mode: soft-light; }
@keyframes kostik { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.06); } 100% { transform: translate(-3%, 2%) scale(1.02); } }
.karsilama-su.canli .dalga, .karsilama-su.canli::before { opacity: .45; }

.dalga { position: absolute; left: -50%; width: 200%; height: 220px; bottom: -40px; opacity: .55;
  background: radial-gradient(60px 26px at 60px 0, transparent 98%, color-mix(in srgb, var(--su3) 70%, transparent) 100%) 0 0 / 120px 100% repeat-x;
  animation: dalga-kay 12s linear infinite; }
.dalga::after { content: ""; position: absolute; inset: 26px 0 0; background: color-mix(in srgb, var(--su3) 70%, transparent); }
.dalga.d1 { bottom: 18%; opacity: .25; animation-duration: 18s; }
.dalga.d2 { bottom: 6%; opacity: .35; animation-duration: 13s; animation-direction: reverse; }
.dalga.d3 { bottom: -60px; opacity: .55; animation-duration: 9s; }
@keyframes dalga-kay { from { transform: translateX(0); } to { transform: translateX(-120px); } }

.kabarciklar span { position: absolute; bottom: -20px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); animation: kabarcik 9s ease-in infinite; }
.kabarciklar span:nth-child(3n) { width: 6px; height: 6px; }
.kabarciklar span:nth-child(4n) { width: 14px; height: 14px; }
@keyframes kabarcik { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(12px, -50vh); } 100% { transform: translate(-8px, -105vh); opacity: 0; } }

.kulvar-ipleri { position: absolute; inset: 0; display: flex; justify-content: space-evenly; opacity: .22; }
.kulvar-ipleri span { width: 6px; height: 100%;
  background: repeating-linear-gradient(180deg, #fff 0 14px, var(--kirmizi) 14px 28px, #fff 28px 42px, var(--mavi) 42px 56px); }

.karsilama-ic { position: relative; max-width: 1080px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; }
.karsilama-bas { text-align: center; color: #fff; text-shadow: 0 2px 14px rgba(0, 30, 60, .35); }
.karsilama-logo { filter: drop-shadow(0 6px 16px rgba(0, 30, 60, .35)); border-radius: 18px; }
.karsilama-ad { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 10px 0 4px; letter-spacing: .01em; }
.karsilama-slogan { margin: 0; opacity: .9; }

/* Cam kart */
.cam-kart { width: min(440px, 100%); padding: 26px 26px 22px; border-radius: 22px; color: var(--metin);
  background: color-mix(in srgb, var(--yuzey-kati) 78%, transparent);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 30px 70px -24px rgba(0, 25, 50, .55), inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  animation: kart-gel .5s ease both; }
@keyframes kart-gel { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cam-kart h2 { font-size: 1.35rem; margin-bottom: 4px; }
.cam-kart > p.soluk { margin-top: 0; }

.giris-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
.giris-form .alan.sabit input { background: var(--zemin2); }
.genis-btn { width: 100%; min-height: 46px; font-size: 1rem; }
.giris-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9rem; }
.giris-link { color: var(--vurgu); font-weight: 600; text-decoration: none; }
.giris-link:hover { text-decoration: underline; }
.giris-mesaj { padding: 10px 12px; border-radius: var(--r-k); font-size: .92rem; }
.giris-mesaj.hata { background: color-mix(in srgb, var(--kirmizi) 14%, transparent); color: var(--kirmizi); }
.giris-mesaj.ok { background: color-mix(in srgb, var(--yesil) 14%, transparent); color: var(--yesil); }
.giris-mesaj[hidden] { display: none; }
.sifre-kutu { position: relative; display: flex; }
.sifre-kutu input { padding-right: 70px; }
.goster-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--vurgu); font: inherit; font-size: .82rem; font-weight: 600; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.uye-ol { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cizgi); text-align: center; }
.uye-ol p { margin: 0 0 8px; color: var(--soluk); }
.uye-ol-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.uye-ol-btn .btn { padding: 8px 10px; font-size: .9rem; }

/* Rol / kanal seçimi */
.rol-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rol-op { position: relative; cursor: pointer; }
.rol-op input { position: absolute; opacity: 0; pointer-events: none; }
.rol-op span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: var(--r-k); border: 2px solid var(--cizgi); background: var(--yuzey-kati); transition: border-color var(--gecis), box-shadow var(--gecis); }
.rol-op small { color: var(--soluk); font-size: .78rem; }
.rol-op input:checked + span { border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 20%, transparent); }
.rol-op input:focus-visible + span { outline: 3px solid var(--vurgu2); outline-offset: 2px; }
.kanal-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.kanal-op { cursor: pointer; }
.kanal-op input { position: absolute; opacity: 0; pointer-events: none; }
.kanal-op span { display: inline-block; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--cizgi); background: var(--yuzey-kati); font-weight: 600; font-size: .9rem; }
.kanal-op input:checked + span { background: var(--vurgu); color: var(--vurgu-metin); border-color: transparent; }
.kanal-op input:focus-visible + span { outline: 3px solid var(--vurgu2); outline-offset: 2px; }
.kanal-op.pasif span { opacity: .55; }
.kanal-secim .ipucu { flex-basis: 100%; }
.kvkk { align-items: flex-start; font-size: .86rem; color: var(--soluk); }
.kvkk input { margin-top: 2px; flex: none; }
.mesaj-linkler { display: inline; }
.hedef-satir { margin: 0; color: var(--soluk); }
.davet-kim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: var(--r-k); background: var(--zemin2); }
.davet-kim span { color: var(--soluk); }

/* Kod kutuları */
.kod-kutular { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.kod-kutu { text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 8px 0; min-height: 54px; border-width: 2px; border-radius: 12px; caret-color: var(--vurgu); }
.kod-kutu:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 22%, transparent); outline: none; }
.kod-araclar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kanal-degis { padding: 10px; border-radius: var(--r-k); background: var(--zemin2); }
.kanal-degis[hidden] { display: none; }

/* Alt bilgi */
.karsilama-bilgi { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bilgi-kutu { padding: 16px; border-radius: 16px; color: #fff; background: rgba(0, 30, 55, .28); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .9rem; }
.bilgi-kutu h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.bilgi-kutu p { margin: 0 0 6px; }
.bilgi-kutu a { color: #fff; font-weight: 600; }
.bilgi-kutu .soluk { color: rgba(255,255,255,.75); }
.saat-liste { list-style: none; margin: 0; padding: 0; }
.saat-liste li { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.18); }
.saat-liste li:last-child { border-bottom: 0; }
.hizmet-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bilgi-kutu .rozet { background: rgba(255,255,255,.2); color: #fff; }

html[data-tema="kontrast"] .karsilama { background: #000; }
html[data-tema="kontrast"] .cam-kart { background: #000; border-color: #fff; backdrop-filter: none; }
html[data-tema="kontrast"] .bilgi-kutu { background: #000; border-color: #fff; }

@media (max-width: 900px) { .karsilama-bilgi { grid-template-columns: 1fr 1fr; } .karsilama-bilgi .bilgi-kutu:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .karsilama-ic { padding: max(18px, env(safe-area-inset-top)) 12px 28px; gap: 16px; }
  .karsilama-logo { width: 56px; height: 56px; }
  .cam-kart { width: 100%; padding: 20px 16px 18px; border-radius: 18px; }
  .karsilama-bilgi { grid-template-columns: 1fr; }
  .kod-kutular { gap: 5px; }
  .kod-kutu { font-size: 1.3rem; min-height: 50px; }
  .rol-secim, .uye-ol-btn { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ GRUP DERSLERİ */
.grup-aciklama { margin-top: -6px; }
.grup-izgara { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grup-kart { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px 20px; border-radius: var(--r); text-decoration: none; color: var(--metin);
  background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge); overflow: hidden; transition: transform var(--gecis), box-shadow var(--gecis); }
.grup-kart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grup-renk, var(--vurgu)); }
.grup-kart:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(5, 40, 70, .35); }
.grup-kart.pasif { opacity: .65; }
.grup-kart-bas { display: flex; align-items: center; gap: 8px; }
.grup-kart-bas h3 { margin: 0; flex: 1; font-size: 1.05rem; }
.grup-kart-satir { display: flex; align-items: center; gap: 8px; color: var(--soluk); font-size: .9rem; }
.grup-renk { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--yuzey-kati); }
.doluluk { display: flex; align-items: center; gap: 8px; }
.doluluk small { color: var(--soluk); white-space: nowrap; }
.doluluk-cubuk { flex: 1; height: 8px; border-radius: 99px; background: var(--zemin2); overflow: hidden; }
.doluluk-cubuk span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--su1), var(--su2)); transition: width .5s ease; }

.grup-ozet { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -4px 0 14px; color: var(--soluk); }
.grup-ozet span { display: inline-flex; align-items: center; gap: 6px; }
.grup-ekle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-width: 460px; }
.uye-ad.kredisiz { color: var(--kirmizi); font-weight: 700; }
.satir-arac { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.uyari-metin { color: var(--sari); font-weight: 600; }
.grup-atlanan { margin-top: 8px; padding: 10px 12px; border-radius: var(--r-k); background: color-mix(in srgb, var(--sari) 12%, transparent); }
.grup-atlanan ul { margin: 6px 0 0; padding-left: 18px; }

.oturum-liste { display: flex; flex-direction: column; gap: 6px; }
.oturum { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-k); border: 1px solid var(--cizgi); background: var(--yuzey-kati); }
.oturum.bugun { border-color: var(--vurgu); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vurgu) 18%, transparent); }
.oturum.iptal { opacity: .6; }
.oturum.iptal .oturum-bilgi > span { text-decoration: line-through; }
.oturum-tarih { display: flex; flex-direction: column; }
.oturum-tarih small, .oturum-yoklama { color: var(--soluk); }
.oturum-bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gun-secim, .kulvar-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.kulvar-secim[hidden] { display: none; }
.gun-op { cursor: pointer; }
.gun-op input { position: absolute; opacity: 0; pointer-events: none; }
.gun-op span { display: inline-block; min-width: 48px; text-align: center; padding: 7px 10px; border-radius: var(--r-k); border: 1px solid var(--cizgi); background: var(--yuzey-kati); font-weight: 600; }
.gun-op input:checked + span { background: var(--vurgu); color: var(--vurgu-metin); border-color: transparent; }
.gun-op input:focus-visible + span { outline: 3px solid var(--vurgu2); outline-offset: 2px; }
.alan[hidden] { display: none; }
.kanal-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }

.grup-ayar { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; margin: 0 0 16px; }
.grup-ayar dt { color: var(--soluk); font-weight: 600; }
.grup-ayar dd { margin: 0; }

/* Yedek yoklama penceresi */
.yoklama-liste { display: flex; flex-direction: column; gap: 6px; }
.yoklama-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cizgi); }
.yoklama-secim { display: flex; gap: 4px; }
.yoklama-secim .btn.secili { background: var(--vurgu); color: var(--vurgu-metin); border-color: transparent; }

@media (max-width: 640px) {
  .oturum { grid-template-columns: 1fr auto; }
  .oturum-tarih { flex-direction: row; gap: 8px; align-items: baseline; }
  .oturum .satir-arac { grid-column: 1 / -1; justify-content: flex-start; }
  .grup-ayar { grid-template-columns: 1fr; }
  .grup-ayar dd { margin-bottom: 6px; }
}