/* ========== GENEL ========== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#f6efcf;
  min-height:100vh;
  background:
    radial-gradient(1400px 900px at 50% 70%, rgba(127,90,240,.16), transparent 60%),
    radial-gradient(1200px 800px at 20% 20%, rgba(88,64,174,.12), transparent 60%),
    radial-gradient(1200px 900px at 80% 30%, rgba(216,196,138,.12), transparent 60%),
    linear-gradient(180deg,#1b183f,#110f2d 52%, #080818);
  overflow:hidden;
}

/* ========== DUMAN & SAYI ARKAPLANI ========== */

.background{
  position:fixed;
  inset:0;
  z-index:0;
}

.smoke{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.smoke::before,
.smoke::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(160% 120% at 50% 120%, rgba(127,90,240,.60), transparent 60%),
    radial-gradient(140% 100% at 10% 115%, rgba(103,191,255,.45), transparent 65%),
    radial-gradient(140% 100% at 90% 115%, rgba(216,196,138,.38), transparent 65%);
  filter:blur(32px);
  opacity:.97;
  animation:smokeRise 20s ease-in-out infinite;
}
.smoke::after{
  opacity:0.80;
  animation-duration:30s;
  animation-direction:alternate-reverse;
}
@keyframes smokeRise{
  0%{ transform:translateY(8%) scale(1); }
  50%{ transform:translateY(-6%) scale(1.04); }
  100%{ transform:translateY(-14%) scale(1.08); }
}

/* SAYI YAĞMURU */

.numbers{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.num{
  position:absolute;
  bottom:-10vh;
  font-weight:900;
  color:#f7e39c;
  text-shadow:
    0 0 8px rgba(247,227,156,.9),
    0 0 18px rgba(216,196,138,.85),
    0 10px 28px rgba(0,0,0,.8);
  opacity:.9;
}
.num.icon{
  text-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 22px rgba(247,227,156,.95),
    0 12px 30px rgba(0,0,0,.85);
}
@keyframes rise{
  0%{
    transform:translateY(0) translateX(0) scale(.9);
    opacity:0;
  }
  20%{
    opacity:1;
  }
  100%{
    transform:translateY(-115vh) translateX(var(--dx,0)) scale(1.02);
    opacity:0;
  }
}

/* ========== GİRİŞ EKRANI (index.html) ========== */

.entry-box{
  position:relative;
  z-index:3;
  max-width:360px;
  width:90%;
  margin:0 auto;
  margin-top:8vh;
  padding:20px 18px 18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,15,35,.92),rgba(7,7,18,.96));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}

/* Pufuduk & Cin avatarları */

.avatar{
  position:absolute;
  top:-30px;
  width:56px;
  height:56px;
  border-radius:50%;
  box-shadow:0 10px 26px rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.avatar::before{
  font-size:26px;
}

/* Pastel mor/pembe Pufuduk */
.avatar-pufuduk{
  left:14px;
  background:
    radial-gradient(circle at 30% 20%, #ffe6ff 0, transparent 55%),
    radial-gradient(circle at 70% 80%, #c77dff 0, transparent 60%),
    radial-gradient(circle at 10% 90%, #9d4edd 0, transparent 55%),
    #3b1d63;
}
.avatar-pufuduk::before{
  content:"🐇";
}

/* Mistik Cin */
.avatar-cin{
  right:14px;
  background:
    radial-gradient(circle at 70% 20%, #fff1c2 0, transparent 55%),
    radial-gradient(circle at 20% 80%, #ffb3c6 0, transparent 60%),
    radial-gradient(circle at 90% 90%, #9d4edd 0, transparent 55%),
    #31143f;
}
.avatar-cin::before{
  content:"🧞";
}

.welcome{
  text-align:center;
  font-size:18px;
  margin-top:18px;
  margin-bottom:6px;
  background:linear-gradient(90deg,#f7e39c,#d1b97a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.input{
  width:100%;
  padding:10px 12px;
  margin-top:4px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(6,6,18,.9);
  color:#f6efcf;
  font-size:14px;
}
.input::placeholder{
  color:rgba(230,220,190,.7);
}

/* ANA GİRİŞ BUTONU */

.main-btn{
  width:100%;
  margin-top:8px;
  padding:11px 12px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg,#f7e39c,#d1b97a);
  color:#151515;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.7);
}
.main-btn:active{
  transform:translateY(1px);
  box-shadow:0 6px 18px rgba(0,0,0,.7);
}

/* KAYIT LİNKİ */

.kayit-link{
  text-align:center;
  font-size:13px;
  color:rgba(245,236,210,.8);
}
.kayit-link a{
  color:#f7e39c;
  text-decoration:none;
  font-weight:600;
}

/* Sosyal giriş butonları */

.social-login{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.social-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font-size:15px;
  cursor:pointer;
  transition:0.25s ease;
}
.social-btn img{
  width:22px;
  height:22px;
}
.social-btn i{
  font-size:20px;
  width:22px;
}
.social-btn:hover{
  background:rgba(255,255,255,0.12);
}

.google:hover{ border-color:#db4437; }
.apple:hover{ border-color:#ffffff; }
.phone:hover{ border-color:#3b82f6; }
.facebook:hover{ border-color:#1877f2; }

@media (max-width:480px){
  .entry-box{
    margin-top:10vh;
    padding:18px 14px 16px;
  }
}

/* ========== ANA SAYFA (home.html) ========== */

.app-shell{
  position:relative;
  z-index:3;
  max-width:900px;
  margin:6vh auto 4vh;
  padding:18px 18px 14px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(9,9,25,.94),rgba(4,4,15,.98));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 80px rgba(0,0,0,.85);
  color:#f6efcf;
}

.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}

.app-logo{
  display:flex;
  align-items:center;
  gap:8px;
}
.logo-dot{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(247,227,156,.8);
  box-shadow:0 0 16px rgba(247,227,156,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
}
.logo-dot::before{
  content:"☽✦☾";
}
.logo-text{
  font-weight:700;
  letter-spacing:.04em;
  font-size:17px;
}

.app-user .app-pill{
  position:relative;
  padding:6px 14px 6px 22px;
  border-radius:999px;
  border:1px solid rgba(247,227,156,.7);
  font-size:12px;
  background:linear-gradient(120deg,rgba(247,227,156,.16),rgba(24,24,48,.9));
  color:#f7e39c;
  box-shadow:0 0 14px rgba(0,0,0,.6);
}
.app-user .app-pill::before{
  content:"★";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
}

.app-main{
  margin-top:4px;
}

.app-title{
  font-size:20px;
  margin-bottom:4px;
}
.app-subtitle{
  font-size:13px;
  color:rgba(245,236,210,.85);
  margin-bottom:14px;
}

.app-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.app-card{
  text-align:left;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 0 0,rgba(247,227,156,.14),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(129,140,248,.16),transparent 55%),
             rgba(10,10,30,.96);
  padding:10px 11px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  cursor:pointer;
  color:#f6efcf;
  transition:.18s;
  .app-link-card{
  text-decoration:none;
}

.app-card:hover{
  border-color:rgba(247,227,156,.6);
  box-shadow:0 12px 26px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.app-card-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(247,227,156,.95), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(129,140,248,.8), transparent 60%);
  box-shadow:0 0 14px rgba(0,0,0,.7);
}
.app-card-body h2{
  font-size:15px;
  margin-bottom:2px;
}
.app-card-body p{
  font-size:12px;
  color:rgba(245,236,210,.82);
}

.app-wide{
  margin-top:12px;
}
.app-card-wide{
  width:100%;
}

.app-footer{
  margin-top:12px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:11px;
  color:rgba(245,236,210,.7);
  text-align:right;
}

@media (max-width:700px){
  .app-shell{
    margin:4vh 10px 3vh;
    border-radius:18px;
  }
  .app-grid{
    grid-template-columns:1fr;
  }
}

/* ========== ASTROKARTOGRAFİ TEMA SEÇİMİ (astro.html) ========== */

.astro-body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#f6efcf;
}

.astro-shell{
  position:relative;
  z-index:3;
  max-width:960px;
  margin:6vh auto 4vh;
  padding:18px 18px 16px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(9,9,25,.96),rgba(4,4,15,.99));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 32px 80px rgba(0,0,0,.85);
}

.astro-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.astro-back{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:#f6efcf;
  padding:7px 12px;
  font-size:12px;
  cursor:pointer;
}
.astro-back:hover{
  background:rgba(255,255,255,.10);
}

.astro-title-wrap h1{
  font-size:20px;
  margin-bottom:4px;
}
.astro-title-wrap p{
  font-size:13px;
  color:rgba(245,236,210,.85);
}

.theme-main{
  margin-top:4px;
}

.theme-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.theme-sphere{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:radial-gradient(circle at 0 0,rgba(247,227,156,.12),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(129,140,248,.14),transparent 55%),
             rgba(10,10,30,.96);
  padding:10px 11px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  text-align:left;
  color:#f6efcf;
  transition:.18s;
}
.theme-sphere:hover{
  border-color:rgba(247,227,156,.75);
  box-shadow:0 14px 30px rgba(0,0,0,.7);
  transform:translateY(-1px);
}

.theme-sphere.theme-selected{
  border-color:rgba(247,227,156,.95);
  box-shadow:0 16px 40px rgba(0,0,0,.85);
  background:radial-gradient(circle at 0 0,rgba(247,227,156,.24),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(129,140,248,.22),transparent 55%),
             rgba(10,10,30,.98);
}

.sphere{
  width:54px;
  height:54px;
  border-radius:999px;
  box-shadow:0 0 18px rgba(0,0,0,.9);
  flex-shrink:0;
}

/* Stellar Clean */
.sphere-stellar{
  background:
    radial-gradient(circle at 30% 20%, #f7e39c, transparent 55%),
    radial-gradient(circle at 70% 80%, #7c3aed, transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(148,163,253,.9), transparent 60%),
    #050817;
}

/* Quantum Purple */
.sphere-quantum{
  background:
    radial-gradient(circle at 20% 10%, #f9a8ff, transparent 55%),
    radial-gradient(circle at 80% 20%, #a855f7, transparent 60%),
    radial-gradient(circle at 50% 90%, #22d3ee, transparent 55%),
    #1e1032;
}

/* Mystic Gold */
.sphere-mystic{
  background:
    radial-gradient(circle at 30% 10%, #fef3c7, transparent 55%),
    radial-gradient(circle at 70% 80%, #eab308, transparent 60%),
    radial-gradient(circle at 10% 90%, #7c2d12, transparent 55%),
    #1b1307;
}

/* Cin & Pufuduk */
.sphere-fun{
  background:
    radial-gradient(circle at 30% 20%, #f9a8d4, transparent 55%),
    radial-gradient(circle at 80% 80%, #a855f7, transparent 60%),
    radial-gradient(circle at 10% 90%, #22c55e, transparent 50%),
    #2b1033;
}

.theme-text h2{
  font-size:15px;
  margin-bottom:2px;
}
.theme-text p{
  font-size:12px;
  color:rgba(245,236,210,.85);
}

.theme-footer{
  margin-top:14px;
  text-align:center;
}

.theme-confirm{
  padding:9px 16px;
  border-radius:999px;
  border:none;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(90deg,#f7e39c,#d1b97a);
  color:#151515;
  box-shadow:0 12px 30px rgba(0,0,0,.7);
}
.theme-confirm:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
}
.theme-note{
  margin-top:6px;
  font-size:11px;
  color:rgba(245,236,210,.7);
}

@media (max-width:700px){
  .astro-shell{
    margin:4vh 10px 3vh;
    border-radius:18px;
    padding:16px 14px 14px;
  }
  .theme-grid{
    grid-template-columns:1fr;
  }
}
/* ========== ASTROKARTOGRAFİ HARİTA (astro-map.html) ========== */

.map-shell{
  position:relative;
  z-index:3;
  max-width:1100px;
  margin:6vh auto 4vh;
  padding:18px 18px 16px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(5,5,16,.96),rgba(2,2,10,.99));
  border:1px solid rgba(148,163,253,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.9);
  color:#f6efcf;
}

.map-header{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}

.map-title-wrap h1{
  font-size:20px;
  margin-bottom:4px;
}
.map-title-wrap p{
  font-size:13px;
  color:rgba(245,236,210,.8);
}

.map-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.7fr);
  gap:14px;
}

/* Sol panel: doğum bilgileri */

.birth-panel{
  border-radius:18px;
  border:1px solid rgba(129,140,248,.4);
  background:
    radial-gradient(circle at 0 0,rgba(148,163,253,.18),transparent 55%),
    rgba(10,12,32,.96);
  padding:12px 12px 10px;
}

.birth-title{
  font-size:16px;
  margin-bottom:8px;
}

.birth-block{
  margin-top:8px;
}

.birth-block label{
  display:block;
  font-size:13px;
  margin-bottom:4px;
  color:rgba(245,236,210,.9);
}

.wheel-group{
  display:flex;
  gap:6px;
}

.wheel-select{
  flex:1;
  padding:7px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,253,.75);
  background:radial-gradient(circle at 50% 0,rgba(148,163,253,.28),transparent 60%),
             rgba(5,7,30,.98);
  color:#e5e7ff;
  font-size:12px;
  outline:none;
  appearance:none;
  background-repeat:no-repeat;
  background-position:right 8px center;
}

.birth-input{
  width:100%;
  padding:8px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,253,.7);
  background:radial-gradient(circle at 50% 0,rgba(148,163,253,.25),transparent 60%),
             rgba(5,7,30,.98);
  color:#e5e7ff;
  font-size:12px;
  outline:none;
}

.birth-hint{
  font-size:11px;
  color:rgba(209,213,245,.8);
  margin-top:4px;
}

.map-run-btn{
  margin-top:10px;
  width:100%;
  padding:9px 12px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  background:linear-gradient(90deg,#22d3ee,#a855f7);
  color:#050816;
  box-shadow:0 16px 40px rgba(0,0,0,.85);
}
.map-run-btn:active{
  transform:translateY(1px);
}

.birth-note{
      .birth-error{
      font-size:11px;
      color:#fca5a5;
      margin-top:4px;
      min-height:14px;
    }

    .map-view.map-active{
      box-shadow:0 26px 70px rgba(56,189,248,.7);
    }
    .map-view.map-active .line::before{
      animation-duration:1.8s;
    }

  margin-top:8px;
  font-size:11px;
  color:rgba(199,210,254,.85);
}

/* Sağ panel: harita cyber görünüm */

.map-panel{
  border-radius:18px;
}

.map-view{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:340px;
  background:
    radial-gradient(circle at 10% 0%,rgba(56,189,248,.25),transparent 55%),
    radial-gradient(circle at 90% 100%,rgba(168,85,247,.32),transparent 55%),
    radial-gradient(circle at 10% 100%,rgba(15,23,42,1),transparent 75%),
    #020617;
  box-shadow:0 24px 60px rgba(0,0,0,.9);
}
    #leafletMap{
      position:absolute;
      inset:0;
      z-index:1;
      filter:brightness(0.55) saturate(1.3);
    }

    .map-overlay{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      z-index:2;
      padding:10px 12px 11px;
      background:linear-gradient(180deg,transparent,rgba(15,23,42,.96));
      font-size:12px;
      color:#e5e7eb;
    }

/* grid görüntüsü */

.map-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(148,163,253,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,253,.18) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:.35;
}

/* iç glow */

.map-glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.35), transparent 65%),
    radial-gradient(circle at 80% 60%, rgba(168,85,247,.38), transparent 65%);
  mix-blend-mode:screen;
  opacity:.9;
}

/* Neon çizgiler (demo) */

.line{
  position:absolute;
  width:2px;
  height:120%;
  top:-10%;
  left:20%;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9));
}
.line::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent,white,transparent);
  animation:linePulse 2.8s linear infinite;
}
@keyframes linePulse{
  0%{ transform:translateY(-30%); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(130%); opacity:0; }
}

.line-sun{
  left:28%;
  background:linear-gradient(180deg,#facc15,#f97316);
}
.line-moon{
  left:45%;
  background:linear-gradient(180deg,#e5e7eb,#38bdf8);
}
.line-venus{
  left:62%;
  background:linear-gradient(180deg,#fb7185,#f472b6);
}
.line-mars{
  left:78%;
  background:linear-gradient(180deg,#f97373,#ef4444);
}

/* Gezegen ikonları */

.planet{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  color:#020617;
  box-shadow:0 8px 22px rgba(0,0,0,.85);
}
.planet-sun{
  left:26%;
  top:18%;
  background:radial-gradient(circle at 30% 20%,#facc15,#fb923c);
}
.planet-moon{
  left:43%;
  top:60%;
  background:radial-gradient(circle at 20% 10%,#e5e7eb,#38bdf8);
}
.planet-venus{
  left:60%;
  top:32%;
  background:radial-gradient(circle at 30% 20%,#fb7185,#f472b6);
}
.planet-mars{
  left:76%;
  top:70%;
  background:radial-gradient(circle at 40% 20%,#f97373,#ef4444);
}

/* Açıklama paneli */

.map-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:10px 12px 11px;
  background:linear-gradient(180deg,transparent,rgba(15,23,42,.96));
  font-size:12px;
  color:#e5e7eb;
}
.map-overlay h3{
  font-size:13px;
  margin-bottom:4px;
}
.map-overlay ul{
  list-style:none;
  margin:4px 0;
  padding:0;
}
.map-overlay li{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:2px;
}
.map-overlay .dot{
  width:10px;
  height:10px;
  border-radius:999px;
}
.map-overlay .dot.sun{
  background:linear-gradient(135deg,#facc15,#fb923c);
}
.map-overlay .dot.moon{
  background:linear-gradient(135deg,#e5e7eb,#38bdf8);
}
.map-overlay .dot.venus{
  background:linear-gradient(135deg,#fb7185,#f472b6);
}
.map-overlay .dot.mars{
  background:linear-gradient(135deg,#f97373,#ef4444);
}
.map-note{
  margin-top:4px;
  font-size:11px;
  color:rgba(209,213,219,.9);
}

/* Küçük ekran uyumu */

@media (max-width:900px){
  .map-layout{
    grid-template-columns:1fr;
  }
}

/* ========== TEMAYA GÖRE HARİTA TONU (özellikle quantum) ========== */

.theme-quantum .map-shell{
  border-color:rgba(94,234,212,.45);
}

.theme-quantum .map-view{
  background:
    radial-gradient(circle at 10% 0%,rgba(56,189,248,.35),transparent 60%),
    radial-gradient(circle at 80% 100%,rgba(168,85,247,.40),transparent 60%),
    #020617;
}