/* =============================
   Digital Kartvizit Landing Styles
   Author: (placeholder)
   ============================= */
@import url('/assets/fonts.css');

/* CSS Reset (modern minimal) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.5;color:#1f2330;background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);-webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;height:auto;}
button{font:inherit;cursor:pointer;background:none;border:none;}
ul{list-style:none;}
a{text-decoration:none;color:inherit;}

/* Design Tokens */
:root{
  --color-bg:#ffffff;
  --color-bg-alt:#f1f5f9;
  --color-surface:#ffffff;
  --color-border:#e2e8f0;
  --color-border-strong:#cbd5e1;
  --color-text:#1f2937;
  --color-text-light:#64748b;
  --color-primary:#2563eb;
  --color-primary-hover:#1d4ed8;
  --color-secondary:#0ea5e9;
  --color-accent:#6366f1;
  --color-warning:#f59e0b;
  --color-success:#10b981;
  --color-danger:#ef4444;
  --gradient-hero:linear-gradient(135deg,#2563eb 0%,#6366f1 50%,#0ea5e9 100%);
  --radius-xs:3px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:18px;
  --shadow-sm:0 2px 4px -2px rgba(0,0,0,.05),0 4px 6px -1px rgba(0,0,0,.08);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.08),0 10px 15px -3px rgba(0,0,0,.07);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 20px 25px -5px rgba(0,0,0,.08);
  --container:1200px;
  --transition:150ms ease;
}

/* Utilities */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding:0 1.25rem;}
.flex{display:flex;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.grid{display:grid;}
.hide{display:none !important;}
.text-center{text-align:center;}
.mt-2{margin-top:.5rem;} .mt-4{margin-top:1rem;} .mt-6{margin-top:1.5rem;} .mt-8{margin-top:2rem;}
.mb-2{margin-bottom:.5rem;} .mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;} .mb-8{margin-bottom:2rem;}

/* Visually Hidden Utility */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Global Elements */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);}
/* Dark mode removed */
.navbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:66px;}
.logo{font-size:1.25rem;font-weight:900;display:flex;align-items:center;gap:.55rem;text-decoration:none;}
/* Icon header global */
.icon-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap;}
.icon-btn{--size:40px;position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:var(--size);height:var(--size);border-radius:12px;text-decoration:none;font-size:.55rem;font-weight:500;color:var(--color-text);background:#fff;border:1px solid var(--color-border);line-height:1;transition:.2s;flex:0 0 auto;}
.icon-btn:hover{background:var(--color-bg-alt);}
.icon-btn.active{border-color:var(--color-primary);background:var(--color-bg-alt);box-shadow:0 0 0 2px rgba(37,99,235,.15);} 
.icon-btn svg{width:18px;height:18px;display:block;color:currentColor;} 
.icon-btn img{width:18px;height:18px;display:block;object-fit:contain;}
.icon-btn span.label{display:none;margin-top:.25rem;}
.icon-btn[data-badge]::after{content:attr(data-badge);position:absolute;top:4px;right:4px;background:var(--color-primary);color:#fff;font-size:.5rem;line-height:1;padding:.15rem .3rem;border-radius:999px;min-width:14px;text-align:center;font-weight:600;}
/* Cart badge outlined style: orange border + text, transparent fill */
.icon-bar a[data-role="icon-cart"][data-badge]::after{
  background: transparent;
  color: #f97316;
  border: none;
  padding: 0;
  min-width: 0;
  border-radius: 0;
}

/* Hide cart icon when empty */
a[data-role="icon-cart"].cart-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}
@media (max-width:720px){
  .icon-bar{gap:.4rem;}
  .icon-btn{--size:54px;width:var(--size);height:var(--size);border-radius:14px;font-size:.6rem;}
  .icon-btn span.label{display:none;}
  .icon-btn svg{width:22px;height:22px;}
}
.icon-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;box-shadow:0 0 0 3px rgba(37,99,235,.25);} 
.logo .brand-text{color:var(--color-text);background:none;-webkit-background-clip:initial;background-clip:initial;line-height:1;font-weight:900;font-size:18px;}
.logo-img-wrap{flex:0 0 auto;}
#header-cta{min-height:42px;display:flex;align-items:center;}

nav ul{display:flex;gap:1.25rem;font-weight:500;}
nav a{padding:.5rem .75rem;border-radius:var(--radius-sm);transition:var(--transition);font-size:.95rem;color:var(--color-text-light);} 
nav a:hover,nav a:focus{background:var(--color-bg-alt);color:var(--color-text);} 

/* Theme toggle removed */
.mobile-toggle{display:none;width:42px;height:42px;border:1px solid var(--color-border);border-radius:var(--radius-sm);}
.mobile-toggle span{width:20px;height:2px;background:var(--color-text);position:relative;display:block;}
.mobile-toggle span::before,.mobile-toggle span::after{content:"";position:absolute;left:0;width:100%;height:100%;background:inherit;}
.mobile-toggle span::before{top:-6px;} .mobile-toggle span::after{top:6px;}

/* Hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 4rem;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:var(--gradient-hero);opacity:.08;pointer-events:none;}
.hero-inner{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;}
.hero-copy h1{font-size:clamp(2.2rem,4.5vw,3.5rem);line-height:1.1;letter-spacing:-.02em;font-weight:700;margin-bottom:1.25rem;}
.hero-copy h1 .gradient{background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-copy p{font-size:1.1rem;max-width:560px;color:var(--color-text-light);margin-bottom:1.75rem;}
.badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;}
.badge{background:var(--color-bg-alt);color:var(--color-text-light);padding:.4rem .75rem;border-radius:2rem;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:600;border:1px solid var(--color-border);}

.cta-group{display:flex;flex-wrap:wrap;gap:.85rem;}
.btn{--btn-bg:var(--color-primary);--btn-bg-hover:var(--color-primary-hover);--btn-color:#fff;--btn-border:var(--color-primary);background:var(--btn-bg);color:var(--btn-color);padding:.9rem 1.25rem;font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.55rem;border-radius:var(--radius-sm);border:1px solid var(--btn-border);box-shadow:var(--shadow-sm);transition:var(--transition);} 
.btn:hover{background:var(--btn-bg-hover);}
.btn-outline{--btn-bg:transparent;--btn-color:var(--color-text);--btn-border:var(--color-border);}
.btn-outline:hover{background:var(--color-bg-alt);} 
.btn-soft{--btn-bg:var(--color-bg-alt);--btn-color:var(--color-text);--btn-border:var(--color-border);}
.btn-soft:hover{background:var(--color-border);} 

/* Gradient animated hero CTA */
.btn-gradient{
  position: relative;
  background: linear-gradient(90deg, #2563eb, #6366f1, #0ea5e9);
  background-size: 200% 200%;
  color: #fff;
  border: 0;
  box-shadow: var(--shadow-sm), 0 8px 20px -6px rgba(37,99,235,.35);
  transition: background-position .5s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-gradient:hover{
  background-position: 100% 0%;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 10px 24px -8px rgba(37,99,235,.4);
}
.btn-gradient:active{ transform: translateY(0); }
.btn-gradient:focus-visible{ outline: 2px solid #93c5fd; outline-offset: 3px; }

/* Optional subtle shine effect on hover */
.btn-gradient::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%);
  pointer-events: none;
  transition: opacity .3s ease;
  opacity: .6;
}
.btn-gradient:hover::after{ opacity: .85; }

.hero-media{position:relative;} 
.mockup-card{background:var(--color-surface);border:1px solid var(--color-border);padding:1.25rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:380px;margin-inline:auto;position:relative;overflow:hidden;}
.mockup-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(99,102,241,.15),transparent 60%);pointer-events:none;}
.mockup-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;}
.mockup-avatar{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:grid;place-items:center;font-weight:600;color:#fff;}
.mockup-info h4{font-size:1.05rem;font-weight:600;}
.mockup-info span{font-size:.75rem;color:var(--color-text-light);}
.mockup-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;}
.mockup-links a{flex:1 1 48%;background:var(--color-bg-alt);padding:.6rem .65rem;border-radius:var(--radius-sm);font-size:.7rem;display:flex;align-items:center;gap:.4rem;color:var(--color-text-light);border:1px solid var(--color-border);}
.mockup-links a:hover{background:var(--color-border);} 

/* Phone Mockup */
.phone-mockup{position:relative;width:300px;max-width:100%;aspect-ratio:9/19;display:flex;align-items:center;justify-content:center;margin-inline:auto;animation:none;}
.phone-frame{position:relative;width:100%;height:100%;border:10px solid #0f172a;border-radius:38px;background:linear-gradient(135deg,#0f172a,#1e293b);box-shadow:0 12px 30px -8px rgba(0,0,0,.35),0 4px 10px -2px rgba(0,0,0,.28);padding:6px;display:flex;}
/* Dark variant removed for phone-frame */
.phone-screen{flex:1;border-radius:30px;background:var(--color-bg);overflow:hidden;display:flex;flex-direction:column;padding:16px;position:relative;}
.phone-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.22),transparent 65%);mix-blend-mode:normal;}
/* Embed önizleme için gradient kapalı */
.phone-screen.phone-screen--embed::after{display:none;}
/* Embed modunda padding yok; içerik tam ekran */
.phone-screen.phone-screen--embed{padding:0;}
/* Removed dark phone-screen variants */
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:120px;height:20px;background:#111;border-radius:12px;z-index:5;}
.phone-status-bar{display:flex;align-items:center;justify-content:space-between;font-size:.55rem;letter-spacing:.05em;font-weight:500;color:var(--color-text-light);margin-bottom:.4rem;gap:.5rem;padding-right:2px;}
.phone-status-bar #phone-time{font-weight:600;color:var(--color-text);} 
.status-icons{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.icon-signal,.icon-wifi,.icon-battery{position:relative;display:inline-block;color:var(--color-text-light);} 
/* Simple icon shapes */
.icon-signal{width:12px;height:10px;display:flex;align-items:flex-end;gap:1px;}
.icon-signal::before,.icon-signal::after,.icon-signal span{content:"";display:block;width:2px;background:currentColor;border-radius:1px;}
.icon-signal::before{height:40%;}
.icon-signal::after{height:80%;}
.icon-signal span{height:60%;}
.icon-wifi{width:12px;height:10px;}
.icon-wifi::before,.icon-wifi::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border:2px solid currentColor;border-top:none;border-radius:0 0 12px 12px;}
.icon-wifi::before{width:12px;height:8px;bottom:0;}
.icon-wifi::after{width:6px;height:4px;bottom:0;}
.icon-battery{width:14px;height:8px;border:1.4px solid currentColor;border-radius:2px;display:block;}
.icon-battery::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:2px;height:4px;background:currentColor;border-radius:1px;}
.icon-battery .battery-level{position:absolute;inset:1px;background:currentColor;border-radius:1px;transform-origin:left center;transform:scaleX(.7);}
.mockup-card.in-phone{box-shadow:none;border:0;padding:0;background:transparent;max-width:unset;margin:0;}
.mockup-card.in-phone::after{display:none;}
.in-phone .mockup-header{margin-bottom:.75rem;}
.in-phone .mockup-avatar{width:64px;height:64px;border-radius:20px;}
.in-phone .mockup-links{margin-top:.9rem;}
.in-phone .mockup-links a{background:var(--color-bg-alt);border:1px solid var(--color-border);font-size:.65rem;padding:.55rem .55rem;}
@media (max-width:640px){
  .phone-mockup{width:240px;}
  .in-phone .mockup-avatar{width:56px;height:56px;}
}

/* Section base */
section{padding:4.5rem 0;position:relative;}
.section-head{margin-bottom:2.5rem;}
.section-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);line-height:1.15;margin-bottom:.75rem;}
.section-head h2, h2{ text-align:center; }
.section-head p{color:var(--color-text-light);max-width:640px;margin-inline:auto;text-align:center;}

/* Features */
.features-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.feature{background:var(--color-surface);border:1px solid var(--color-border);padding:1.5rem;border-radius:var(--radius-md);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.75rem;transition:var(--transition);}
.feature:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);} 
.feature-icon{font-size:2rem;line-height:1;margin-bottom:.25rem;} 
.feature h3{font-size:1.05rem;letter-spacing:-.01em;}
.feature p{font-size:.85rem;color:var(--color-text-light);}
.feature-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,#10b981,#3b82f6);color:#fff;padding:.3rem .75rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);box-shadow:0 12px 24px rgba(16,185,129,.25);transform:translateY(-2px);}
.feature-link{color:inherit;text-decoration:none;}
.feature-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;}
/* Center the 3-item block below blog */
.features-grid.trio-center{justify-items:center;text-align:center;}
.features-grid.trio-center .feature{align-items:center;}

/* How It Works */
.steps{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:step;}
.step{background:var(--color-surface);border:1px solid var(--color-border);padding:1.5rem 1.25rem;border-radius:var(--radius-md);position:relative;display:flex;flex-direction:column;gap:.65rem;}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:16px;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:grid;place-items:center;color:#fff;font-weight:600;box-shadow:var(--shadow-sm);}
.step h3{font-size:1rem;}
.step p{font-size:.82rem;color:var(--color-text-light);}

/* Pricing */
.pricing-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch;}
.plan{background:var(--color-surface);border:1px solid var(--color-border);padding:2rem 1.5rem 2.2rem;border-radius:var(--radius-lg);position:relative;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-sm);} 
.plan.highlight{border:2px solid var(--color-primary);box-shadow:0 8px 30px -6px rgba(37,99,235,.25);} 
.plan h3{font-size:1.15rem;}
.price{font-size:2rem;font-weight:700;letter-spacing:-.02em;}
.price span{font-size:.75rem;font-weight:500;color:var(--color-text-light);}
.plan ul{display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;}
.plan li{display:flex;align-items:flex-start;gap:.45rem;}
.plan li::before{content:"✓";color:var(--color-success);font-weight:600;font-size:.8rem;line-height:1.4;}
.badge-popular{position:absolute;top:-12px;right:16px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));color:#fff;font-size:.6rem;font-weight:600;padding:.4rem .55rem;border-radius:var(--radius-sm);letter-spacing:.05em;box-shadow:var(--shadow-sm);}
.plan.upcoming{opacity:.85;}
.plan.upcoming:hover{box-shadow:var(--shadow-sm);}

/* Testimonials */
.testimonials{background:linear-gradient(180deg,var(--color-bg-alt),rgba(255,255,255,.4));}
.testimonials-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.testimonial{background:var(--color-surface);border:1px solid var(--color-border);padding:1.4rem 1.25rem;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:.85rem;position:relative;}
.testimonial p{font-size:.8rem;color:var(--color-text-light);}
.testimonial .person{display:flex;align-items:center;gap:.65rem;}
.person-avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));display:grid;place-items:center;color:#fff;font-weight:600;}
.person span{display:block;font-size:.7rem;color:var(--color-text-light);}

/* FAQ */
.faq-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.faq-item{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;}
.faq-question{width:100%;text-align:left;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.85rem;gap:1rem;}
.faq-question span{flex:1;text-align:left;}
.faq-answer{max-height:0;overflow:hidden;transition:300ms ease;line-height:1.5;}
.faq-item.open .faq-answer{padding:0 1rem 1rem;max-height:300px;}
.faq-answer p{font-size:.75rem;color:var(--color-text-light);}

/* Newsletter */
.newsletter-box{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;padding:3rem 2.25rem;border-radius:var(--radius-lg);display:grid;gap:1.25rem;position:relative;overflow:hidden;z-index:1;}
.newsletter-box::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.25),transparent 65%);}
.newsletter-box h3{font-size:1.6rem;line-height:1.2;}
.newsletter-form{display:flex;flex-wrap:wrap;gap:.75rem;position:relative;z-index:1;}
.newsletter-form input{flex:1 1 260px;padding:.85rem 1rem;border-radius:var(--radius-sm);border:none;outline:none;font-size:.85rem;box-sizing:border-box;max-width:100%;}
.newsletter-form button{background:#0f172a;--btn-bg:#0f172a;--btn-bg-hover:#020617;border:1px solid #1e293b;}
/* Removed dark newsletter button variant */

/* Footer */
footer{padding:3rem 0 2.5rem;border-top:1px solid var(--color-border);background:var(--color-bg);}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.footer-brand p{font-size:.75rem;color:var(--color-text-light);margin-top:.75rem;max-width:260px;}
.footer-col h4{font-size:.85rem;margin-bottom:.75rem;}
.footer-col ul{display:flex;flex-direction:column;gap:.4rem;font-size:.75rem;}
.footer-col a{color:var(--color-text-light);} 
.footer-col a:hover{color:var(--color-text);} 
.sub-footer{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border);font-size:.65rem;color:var(--color-text-light);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;}

/* Responsive */
@media (max-width:880px){
  nav ul{position:absolute;top:calc(100% + 4px);right:0;flex-direction:column;background:var(--color-surface);padding:1rem 1.25rem;border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:200px;box-shadow:var(--shadow-lg);display:none;}
  nav ul.open{display:flex;animation:fadeIn .25s ease;}
  .mobile-toggle{display:grid;place-items:center;}
}

@media (max-width:640px){
  .hero{padding-top:4rem;}
  .hero-copy h1{font-size:clamp(2rem,9vw,2.6rem);} 
  header{padding-bottom:.75rem;}
  .navbar{height:auto;flex-direction:column;gap:.75rem;padding:.75rem 0;position:relative;}
  .navbar .nav-start{width:100%;display:flex;justify-content:space-between;align-items:center;}
  nav{position:static;}
  .logo{gap:.4rem;}
  .logo .brand-text{font-size:16px;}
  #header-cta{width:100%;justify-content:center;}
  /* Mobile header icon bar: avoid squishing when many items exist (Asistan + Menü etc.) */
  .icon-bar{gap:.4rem;justify-content:flex-start;overflow-x:auto;max-width:100%;padding:0 .25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .icon-bar::-webkit-scrollbar{display:none;}
  .icon-btn{--size:52px;}
  .newsletter-box{padding:2.25rem 1.75rem;position:static;z-index:auto;}
  .newsletter-box h3{font-size:1.3rem;}
  .newsletter-form input{flex:1 1 auto;min-width:0;max-width:100%;}
  .pricing-grid{gap:1.25rem;}
}

/* Very small phones */
@media (max-width:480px){
  .container{padding:0 .9rem;}
  header{padding-bottom:.5rem;}
  .navbar{gap:.5rem;padding:.5rem 0;}
  .logo{gap:.3rem;}
  .logo .brand-text{font-size:15px;}
  .icon-bar{gap:.35rem;}
  .icon-btn{--size:46px;font-size:.55rem;}
  .mobile-toggle{width:36px;height:36px;}
  .hero{padding:3rem 0 3.5rem;}
  .hero-copy p{font-size:.95rem;}
  .cta-group .btn{flex:1 1 100%;justify-content:center;}
  .phone-mockup{width:210px;}
  .mockup-links a{flex:1 1 100%;}
  .mockup-links a{padding:.75rem .8rem;font-size:.7rem;}
  .btn{padding:1rem 1.1rem;}
  .features-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .faq-grid{grid-template-columns:1fr;}
  .newsletter-form{flex-direction:column;}
  .newsletter-form input{flex:1;min-width:0;width:100%;font-size:.9rem;padding:.75rem .85rem;}
  .newsletter-form button{width:100%;justify-content:center;}
  .newsletter-box{position:static !important;z-index:auto !important;margin:2rem 0;padding:2rem 1.5rem;}
  nav ul{right:8px;top:calc(100% + 4px);}
  nav ul a{padding:.85rem 1rem;font-size:.9rem;}
  nav ul{min-width:75%;left:50%;transform:translateX(-50%);right:auto;}
}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important;}
  .phone-mockup{animation:none;}
}

/* Accessibility focus */
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}

/* Dark adjustments */
/* Dark variant blocks removed */

/* =============================
   Typography Overrides (Readable Defaults)
   Açıklama: Tasarımda pek çok yerde .7rem / .75rem / .8rem kullanıldığı için
   mobilde metinler küçük görünüyordu. Aşağıdaki blok, esas içerik metinlerini
   daha okunabilir değerlere çeker. İstenirse kaldırılabilir / düzenlenebilir.
   Strateji:
   - En küçük yardımcı metinleri: 0.75rem -> 0.8rem (.75 ≈ 12px -> ~12.8px)
   - Genel küçük paragrafları: 0.8rem -> 0.9rem
   - Liste / açıklama metinlerinin çoğunu: 0.75/.8 -> 0.875rem veya 0.9rem
   - Ana gövde metni zaten 1rem civarı; başlıklara dokunmuyoruz.
   Not: Gözle kontrol edip gerekiyorsa ince ayar yapabilirsiniz.
============================= */

/* Yardımcı en küçük metinler */
.badge,
.person span,
.faq-answer p,
.price span,
.badge-popular,
.icon-btn span.label,
.sub-footer { font-size: 0.8rem; }

/* Daha önce ~0.75-.8rem olan açıklama / liste metinleri */
.feature p,
.testimonial p,
.plan ul,
.plan li::before,
.faq-question,
.footer-col ul,
.footer-brand p,
.newsletter-form input,
.mockup-links a,
.plan li,
.mockup-info span { font-size: 0.9rem; }

/* Genel okunurluk için bazı öğeleri base'e yaklaştır */
.faq-answer p,
.footer-col h4,
.feature h3,
.step p,
.step h3 { line-height: 1.45; }

/* Küçük buton / link alanları geniş kalmalı */
.mockup-links a { padding: .65rem .7rem; }

/* Çok dar alanı olan ikon butonları için font artışı minimal tutuldu */
.icon-btn { font-size: 0.65rem; }

/* Responsive özel: Çok küçük ekranlarda biraz daha rahat */
@media (max-width:480px){
  body { font-size: 17px; } /* Tabanı çok az büyüt */
}

.right {
  flex: 1;
  background: #f3f4f6;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 2rem 2rem;
}

.right-inner {
  position: sticky;
  top: 0;
  margin-top: 0;
}

.label {
  margin: 0 0 .5rem;
}

.frame {
  display: block;
}