/* Professional Coming Soon styles */
:root{
  --bg-0:#f8fafc;        /* slate-50 */
  --bg-1:#eef2f7;        /* light gradient end */
  --surface:#ffffff;
  --text:#0f172a;        /* slate-900 */
  --muted:#334155;       /* slate-700 */
  --brand:#1e3a8a;       /* indigo-800 */
  --brand-2:#ef4444;     /* red-500 */
  --accent:#2563eb;      /* blue-600 */
  --line:#e5e7eb;        /* neutral border */
  --footer:#ffffffd9;    /* translucent */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 50% -10%, #e8eef7 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  min-height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-header{
  display:flex; align-items:center; justify-content:center;
  padding:18px 20px;
}
.brand{display:grid; gap:6px; text-align:center}
.brand-top{background:#1d4ed8; color:#fff; font-weight:800; padding:6px 12px; border-radius:8px}
.brand-bottom{background:#ef4444; color:#fff; font-weight:800; padding:6px 12px; border-radius:8px}

.hero{display:grid; place-items:center; padding:0; margin:0; min-height:100vh; position:relative}
.hero-img{width:auto; height:auto; max-width:100vw; max-height:100vh; object-fit:contain; display:block}

/* Öğrenci figürü + konuşma balonu */
.student{position:fixed; right:24px; bottom:24px; display:flex; align-items:flex-end; gap:12px; z-index:10}
.student-img{width:84px; height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,.15))}
.speech{background:#ffffff; color:#0f172a; border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-weight:700; box-shadow:0 10px 30px rgba(2,6,23,.10); max-width:min(70ch, 80vw);}
.speech::after{content:""; position:absolute}
.student .speech{position:relative}
.student .speech::after{bottom:-8px; right:40px; width:14px; height:14px; background:#fff; border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg)}

@media (max-width: 520px){
  .student{right:12px; bottom:12px}
  .student-img{width:64px}
}

.hero-meta{margin-top:20px; display:grid; gap:8px}
.info-line{margin:0; color:#475569}
.info-line a{color:var(--accent); text-decoration:none}
.info-line a:hover{text-decoration:underline}

.countdown{display:inline-flex; gap:14px; align-items:center; justify-content:center; font-weight:700; color:#0b3e83}
.countdown .box{display:grid; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; min-width:70px; background:linear-gradient(180deg,#fff, #f8fafc)}
.countdown .num{font-size:clamp(18px,3.5vw,28px)}
.countdown .lbl{font-size:12px; color:#64748b}

.bottom-banner{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--footer); backdrop-filter: blur(8px);
  border-top:1px solid var(--line);
  padding:16px 20px; display:flex; align-items:center; justify-content:center; gap:10px;
}
.typewriter{
  font-size: clamp(18px, 3.4vw, 28px);
  font-weight:800; color:var(--muted);
  white-space:nowrap; overflow:hidden; display:inline-flex; align-items:center; position:relative;
}
.typewriter::after{ content:'▍'; color:var(--accent); margin-left:8px; animation:blink 1s steps(2,start) infinite; }
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .typewriter::after{animation:none; opacity:1}
}