/* TOBB e-İmza Portal - Standalone Styles */
:root{
  --bg:#0b1224;
  --bg-soft:#0f1730;
  --panel:#0f1f3a;
  --panel-soft:#12234a;
  --accent:#1c7ed6;
  --accent-2:#3ea6ff;
  --accent-glow:rgba(62, 166, 255, 0.15);
  --brand:#d71920;
  --text:#e6eefc;
  --text-bright:#ffffff;
  --muted:#9bb3db;
  --ok:#22c55e;
  --warn:#f59e0b;
  --err:#ef4444;
  --chip:#1a2b52;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-strong: 0 15px 40px rgba(0,0,0,.5);
  --glow: 0 0 20px rgba(62, 166, 255, 0.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, #13224a 0%, transparent 60%),
              radial-gradient(1000px 600px at 120% 10%, #0e1b39 0%, transparent 60%),
              var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  animation: fadeInPage 0.8s ease-out;
}

@keyframes fadeInPage {
  from {opacity:0.4}
  to {opacity:1}
}
.container{width:min(1200px, 92%); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px); background:rgba(10,16,32,.7); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 4px 20px rgba(0,0,0,.2)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.brand{display:flex; align-items:center; gap:14px; transition:all 0.3s ease}
.brand:hover{transform:translateY(-2px)}
.logo{display:grid; place-items:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); border-radius:12px; width:60px; height:60px; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,.15)}
.brand:hover .logo{border-color:rgba(62, 166, 255, 0.3); box-shadow:var(--glow)}
.brand-text{font-weight:600; font-size:18px; letter-spacing:0.5px}
.brand-text strong{color:var(--text-bright)}
.top-nav{display:flex; gap:24px}
.nav-link{color:var(--text); text-decoration:none; opacity:.9; position:relative; padding:6px 2px; transition:all 0.3s ease}
.nav-link::after{content:""; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:var(--accent-2); transition:all 0.3s ease; opacity:0; border-radius:2px}
.nav-link:hover{opacity:1; color:var(--text-bright)}
.nav-link:hover::after{width:100%; opacity:1}

/* Hero */
.hero{padding:70px 0 40px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:-200px; left:-200px; width:400px; height:400px; background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); border-radius:50%; z-index:0; animation:pulse 8s infinite alternate ease-in-out}
.hero::after{content:""; position:absolute; bottom:-100px; right:-100px; width:300px; height:300px; background:radial-gradient(circle, rgba(28, 126, 214, 0.1) 0%, transparent 70%); border-radius:50%; z-index:0; animation:pulse 6s infinite alternate-reverse ease-in-out}
.hero-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center; position:relative; z-index:1}
.hero-text h1{margin:0 0 16px; font-size:clamp(28px, 3vw, 44px); line-height:1.2; color:var(--text-bright); text-shadow:0 0 30px rgba(0,0,0,.5)}
.hero-text p{color:var(--muted); margin:0 0 28px; font-size:18px; max-width:90%}
.hero-actions{display:flex; gap:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 20px; border-radius:12px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:all 0.3s ease; font-weight:500}
.btn-primary{background:linear-gradient(180deg, var(--accent), #1666ad); color:white; box-shadow:var(--shadow); position:relative; overflow:hidden}
.btn-primary::after{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:rgba(255,255,255,0.1); transform:rotate(45deg); transition:all 0.3s ease; z-index:1; opacity:0}
.btn-primary:hover{transform:translateY(-2px); box-shadow:var(--shadow-strong)}
.btn-primary:hover::after{opacity:1; transform:rotate(45deg) translate(10%, 10%)}
.btn-ghost{background:rgba(255,255,255,0.03); border-color:#ffffff22; color:var(--text); backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(255,255,255,0.08); transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.2)}
.hero-art{width:100%; position:relative}
.hero-art::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, var(--accent-glow) 0%, transparent 100%); border-radius:18px; opacity:0.5; z-index:1; animation:glow 4s infinite alternate ease-in-out}
.hero-svg{width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow); position:relative; z-index:2; transition:all 0.5s ease}
.hero-svg:hover{transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-strong), var(--glow)}

@keyframes pulse {
  0% {opacity:0.3; transform:scale(1)}
  100% {opacity:0.7; transform:scale(1.2)}
}

@keyframes glow {
  0% {opacity:0.3}
  100% {opacity:0.7}
}

/* Download Tabs */
.download{padding:50px 0 30px; position:relative; background:radial-gradient(800px 400px at 50% 0%, rgba(28, 126, 214, 0.15) 0%, transparent 70%); border-top:1px solid rgba(62, 166, 255, 0.1); border-bottom:1px solid rgba(62, 166, 255, 0.1)}
.download::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, transparent, var(--accent-2), transparent); opacity:0.5; border-radius:50%}
.download-title{margin:0 0 24px; font-size:32px; text-align:center; color:var(--text); text-shadow:0 0 15px rgba(62, 166, 255, 0.5)}
.os-tabs{display:flex; gap:12px; margin:0 auto 24px; justify-content:center}
.os-tab{background:linear-gradient(180deg, var(--panel), var(--panel-soft)); border:1px solid #1c2f5c; color:var(--text); padding:14px 20px; border-radius:12px; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:17px; font-weight:500; transition:all 0.3s ease; box-shadow:var(--shadow)}
.os-tab:hover{transform:translateY(-2px); border-color:#2a4a8f; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.os-tab.active{background:linear-gradient(180deg, #1a3b6c, #102a56); border-color:var(--accent); box-shadow:0 0 15px rgba(62, 166, 255, 0.3), var(--shadow)}
.os-logo{width:24px; height:24px; color:var(--accent-2)}
.tab-panels{margin-top:16px}
.tab-panel{display:none}
.tab-panel.active{display:block; animation:fadeIn 0.5s ease}
.grid.two{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
.grid.three{display:grid; grid-template-columns: repeat(3, 1fr); gap:24px}
.card{background:linear-gradient(180deg, var(--panel), var(--panel-soft)); border:1px solid #1c2f5c; border-radius:16px; padding:24px; box-shadow:var(--shadow); transition:all 0.3s ease; position:relative; overflow:hidden}
.card::before{content:""; position:absolute; top:-100px; right:-100px; width:200px; height:200px; background:radial-gradient(circle, rgba(62, 166, 255, 0.1) 0%, transparent 70%); border-radius:50%; z-index:0; transition:all 0.5s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 15px 35px rgba(0,0,0,.5); border-color:#2a4a8f}
.card:hover::before{transform:scale(1.5)}
.card.subtle{background:linear-gradient(180deg, #0d1a33, #0c1530)}
.card-header{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.os-card-logo{width:42px; height:42px; color:var(--accent-2); flex-shrink:0}
.card h3{margin:0; font-size:22px; color:var(--accent-2)}
.card h4{margin:0 0 14px; font-size:18px}
.bullets{margin:0 0 20px 18px}
.bullets li{margin-bottom:8px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.btn.btn-primary{padding:14px 24px; font-size:16px; font-weight:500; letter-spacing:0.5px; position:relative; overflow:hidden}
.btn.btn-primary::after{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:rgba(255,255,255,0.1); transform:rotate(45deg); transition:all 0.3s ease; z-index:1; opacity:0}
.btn.btn-primary:hover::after{opacity:1; transform:rotate(45deg) translate(10%, 10%)}
.btn.btn-primary span{position:relative; z-index:2}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--chip); border:1px solid #29437e; padding:6px 10px; border-radius:999px; color:#cfe2ff; font-size:.9rem}
.muted{color:var(--muted)}
.small{font-size:.9rem}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px)}
  to {opacity:1; transform:translateY(0)}
}

/* Help */
.help{padding:24px 0 60px}
.help-grid .help-card{background:linear-gradient(180deg, #0d1b36, #0d1830); border:1px solid #193165; border-radius:16px; padding:18px}
.help-icon{font-size:26px}
.steps{margin:8px 0 10px 18px}
.help details{margin-top:8px; background:#0d1a33; border:1px solid #193165; border-radius:12px; padding:8px 12px}

/* CTA test */
.cta-test{
  margin-top:36px; 
  padding:30px; 
  background:linear-gradient(135deg, #102a56, #0a1731); 
  border:1px solid #2a4a8f; 
  border-radius:18px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:20px; 
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:all 0.3s ease;
}
.cta-test:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-strong), 0 0 20px rgba(62, 166, 255, 0.15);
  border-color:#3a5ca0;
}
.cta-test::before{
  content:"";
  position:absolute;
  top:-50px;
  right:-50px;
  width:150px;
  height:150px;
  background:radial-gradient(circle, rgba(62, 166, 255, 0.15) 0%, transparent 70%);
  border-radius:50%;
  z-index:0;
  animation:pulse 5s infinite alternate ease-in-out;
}
.cta-test h3{
  margin:0 0 8px;
  font-size:22px;
  color:var(--text-bright);
}
.cta-test p{
  margin:0 0 16px;
  max-width:600px;
  color:var(--muted);
}
.cta-test .btn{
  position:relative;
  z-index:1;
}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.1); background:rgba(8,12,24,.7); backdrop-filter:saturate(140%) blur(8px); position:relative}
.site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--accent-glow), transparent); opacity:0.8}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:20px 0; position:relative; z-index:1}
.footer-links{display:flex; gap:20px}
.footer-links a{color:var(--muted); text-decoration:none; transition:all 0.3s ease; position:relative; padding:4px 2px}
.footer-links a::after{content:""; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--accent-2); transition:all 0.3s ease; opacity:0}
.footer-links a:hover{color:var(--text); transform:translateY(-1px)}
.footer-links a:hover::after{width:100%; opacity:0.7}

/* Test page */
.test-wrap{display:grid; grid-template-columns: .8fr 1.2fr ; gap:18px; margin:18px 0 40px}
.preview{background:linear-gradient(180deg, var(--panel), var(--panel-soft)); border:1px solid #1c2f5c; border-radius:16px; padding:18px; box-shadow:var(--shadow); min-height:380px}
.preview .doc{background:#0d1a33; border:1px dashed #274482; border-radius:12px; height:300px; display:grid; place-items:center; color:#9db6e6}
.sign-panel{background:linear-gradient(180deg, #0d1b36, #0d1830); border:1px solid #193165; border-radius:16px; padding:18px}
.pin-display{display:flex; gap:6px; margin:6px 0 12px}
.pin-dot{width:14px; height:14px; border-radius:50%; background:#223a73; border:1px solid #2a4a8f}
.pin-dot.filled{background:#cde3ff}
.keypad{display:grid; grid-template-columns: repeat(3, 64px); gap:10px; justify-content:center; margin:10px 0}
.key{width:64px; height:48px; background:#102145; border:1px solid #224182; color:#e6eefc; border-radius:12px; cursor:pointer; box-shadow:var(--shadow)}
.key:hover{background:#112855}
.key.action{background:#3a0f0f; border-color:#6a1b1b}
.key.ok{background:#0e3a1e; border-color:#15622f}
.status{min-height:24px; color:var(--muted); margin-top:8px}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}

/* App Notification */
#app-notification img {
  max-width: 24px;
  max-height: 24px;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr}
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr}
  .test-wrap{grid-template-columns: 1fr}
}


/* Logo image fit */
.logo img{max-width:100%; max-height:100%; object-fit:contain; border-radius:8px}