/* ==========================================================================
   CSSPainter — main.css  v8
   ========================================================================== */

/* ── Tokens ── */
:root {
  --bg:    #0b0b12;
  --surf:  #111119;
  --surf2: #17171f;
  --surf3: #1d1d28;
  --b0:    #21212f;
  --b1:    #2b2b3d;
  --acc:   #6c63ff;
  --ach:   #5752d1;
  --acc2:  #ff6b9d;
  --acc3:  #00d4aa;
  --tx:    #e2e2f0;
  --tx2:   #9898b8;
  --mu:    #52526a;
  --dim:   #2c2c44;
  --r:     8px;
  --rl:    13px;
  --sh:    0 8px 32px rgba(0,0,0,.5);
  --t:     .16s ease;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--tx);
  font-family:'Inter',system-ui,sans-serif;
  font-size:15px;line-height:1.6;min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:var(--acc);text-decoration:none;}
a:hover{color:var(--acc2);}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(11,11,18,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--b0);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 20px;
  height:56px;display:flex;align-items:center;
}
.nav-logo{
  display:flex;align-items:center;gap:8px;
  font-weight:600;font-size:.9rem;color:var(--tx);
  letter-spacing:-.01em;flex-shrink:0;margin-right:12px;
  text-decoration:none;
}
.nav-logo:hover{color:var(--tx);}

/* overflow:visible — kritik! Dropdown'un kırpılmaması için */
.nav-links{display:flex;align-items:center;flex:1;overflow:visible;min-width:0;}
.nav-link{
  display:block;padding:5px 10px;
  font-size:.82rem;font-weight:500;color:var(--tx2);
  border-radius:6px;white-space:nowrap;text-decoration:none;
  transition:color var(--t),background var(--t);flex-shrink:0;
}
.nav-link:hover    {color:var(--tx);background:var(--surf2);}
.nav-link.is-active{color:var(--acc);background:rgba(108,99,255,.1);}

/* More dropdown */
.nav-more{position:relative;flex-shrink:0;}
.nav-more-btn{
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;font-size:.82rem;font-weight:500;
  color:var(--tx2);border-radius:6px;
  transition:color var(--t),background var(--t);cursor:pointer;
}
.nav-more-btn:hover{color:var(--tx);background:var(--surf2);}
.nav-dropdown{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:148px;background:var(--surf2);
  border:1px solid var(--b1);border-radius:var(--rl);
  padding:5px;box-shadow:var(--sh);
  z-index:500;
  transition:opacity .15s ease, visibility .15s ease;
}
.nav-more.is-open .nav-dropdown{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.nav-dropdown .nav-link{padding:7px 10px;border-radius:6px;display:block;width:100%;}

.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}

.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;padding:6px;cursor:pointer;background:transparent;border:none;
}
.nav-hamburger span{
  display:block;width:20px;height:2px;
  background:var(--tx2);border-radius:2px;transition:var(--t);
}

/* Mobile nav */
.nav-mobile{
  display:none;position:fixed;top:56px;left:0;right:0;z-index:195;
  background:var(--surf);border-bottom:1px solid var(--b0);
  padding:10px 20px 14px;flex-direction:column;gap:2px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.nav-mobile.is-open{display:flex;}
.nav-mobile .nav-link{padding:8px 10px;}
.nav-mobile-sep{height:1px;background:var(--b0);margin:5px 0;}

/* ==========================================================================
   MAIN
   ========================================================================== */
#main-content{flex:1;}

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.home-hero{
  max-width:1280px;margin:0 auto;
  padding:72px 20px 52px;
}

/* Kicker line */
.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:24px;
  font-size:.78rem;font-weight:500;color:var(--tx2);
  letter-spacing:.01em;
}
.hero-kicker-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--acc);flex-shrink:0;
  box-shadow:0 0 8px rgba(108,99,255,.6);
}

.home-hero h1{
  font-size:clamp(2rem,4vw,3.3rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-.03em;color:var(--tx);
  margin-bottom:18px;max-width:660px;
}

.hero-sub{
  font-size:.95rem;color:var(--tx2);
  max-width:520px;line-height:1.72;
}

/* ==========================================================================
   TOOLS GRID
   ========================================================================== */
.tools-section{max-width:1280px;margin:0 auto;padding:0 20px 72px;}
.section-label{
  display:block;font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--mu);margin-bottom:18px;
}
.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tool-card{
  background:var(--surf);border:1px solid var(--b0);
  border-radius:var(--rl);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color var(--t),transform .2s ease,box-shadow .2s ease;
}
.tool-card:hover{
  border-color:rgba(108,99,255,.4);
  transform:translateY(-2px);
  box-shadow:0 10px 36px rgba(0,0,0,.3);
  color:inherit;
}
.tool-card-body{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:5px;flex:1;
}
.tool-card h2  {font-size:.9rem;font-weight:600;color:var(--tx);letter-spacing:-.01em;}
.tool-card p   {font-size:.77rem;color:var(--tx2);line-height:1.57;flex:1;}
.tool-card-arrow{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.74rem;font-weight:500;color:var(--mu);
  margin-top:8px;transition:color var(--t),gap var(--t);
}
.tool-card:hover .tool-card-arrow{color:var(--acc);gap:8px;}

/* ==========================================================================
   HOME ABOUT
   ========================================================================== */
.home-about{
  background:var(--surf);
  border-top:1px solid var(--b0);
  border-bottom:1px solid var(--b0);
}
.home-about-inner{
  max-width:1280px;margin:0 auto;
  padding:64px 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
}
.home-about-text h2{
  font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;
  letter-spacing:-.025em;line-height:1.15;
  margin-bottom:14px;color:var(--tx);
}
.home-about-text p{color:var(--tx2);font-size:.88rem;line-height:1.74;margin-bottom:12px;}
.home-about-text p:last-child{margin-bottom:0;}
.features-list{display:flex;flex-direction:column;gap:18px;padding-top:4px;}
.feature-item{display:flex;gap:12px;align-items:flex-start;}
.feature-dot{
  width:6px;height:6px;background:var(--acc);
  border-radius:50%;flex-shrink:0;margin-top:8px;
}
.feature-item strong{font-size:.84rem;color:var(--tx);display:block;margin-bottom:3px;}
.feature-item p{font-size:.77rem;color:var(--tx2);margin:0;line-height:1.57;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--r);font-size:.8rem;font-weight:500;
  transition:background var(--t),color var(--t),border-color var(--t),transform .1s;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
}
.btn:active         {transform:scale(.97);}
.btn-primary        {background:var(--acc);color:#fff;}
.btn-primary:hover  {background:var(--ach);color:#fff;}
.btn-secondary      {background:transparent;border-color:var(--b1);color:var(--tx2);}
.btn-secondary:hover{background:var(--surf2);color:var(--tx);}
.btn-success        {background:var(--acc3);color:#0b0b12;border-color:var(--acc3);}
.btn-sm             {padding:5px 12px;font-size:.76rem;border-radius:7px;}

/* ==========================================================================
   STATIC PAGES
   ========================================================================== */
.page-wrapper{max-width:820px;margin:0 auto;padding:48px 20px 72px;}
.page-wrapper h1{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.025em;margin-bottom:6px;}
.page-meta{color:var(--mu);font-size:.8rem;margin-bottom:36px;}
.page-wrapper h2{font-size:1.1rem;font-weight:600;margin:32px 0 10px;color:var(--tx);}
.page-wrapper h3{font-size:.92rem;font-weight:600;margin:20px 0 6px;color:var(--tx);}
.page-wrapper p {margin-bottom:13px;color:var(--tx2);line-height:1.74;}
.page-wrapper ul{margin:8px 0 14px 18px;list-style:disc;}
.page-wrapper ul li{margin-bottom:6px;color:var(--tx2);line-height:1.65;}
.page-wrapper a {color:var(--acc);}
.page-wrapper code{
  font-family:'JetBrains Mono',monospace;font-size:.8em;
  background:var(--surf2);padding:2px 6px;border-radius:4px;color:var(--acc2);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:.8rem;font-weight:500;margin-bottom:5px;color:var(--tx);}
.form-control{
  width:100%;background:var(--surf2);border:1px solid var(--b1);
  border-radius:var(--r);padding:9px 12px;font-size:.83rem;
  color:var(--tx);font-family:inherit;
  transition:border-color var(--t);-webkit-appearance:none;appearance:none;
}
.form-control:focus{outline:none;border-color:var(--acc);}
.form-control.error{border-color:#e04040;}
textarea.form-control{min-height:116px;resize:vertical;line-height:1.6;}
select.form-control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352526a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;cursor:pointer;
}
.field-error{font-size:.75rem;color:#e04040;margin-top:4px;display:none;}
.field-error.visible{display:block;}
.char-count{font-size:.75rem;color:var(--mu);text-align:right;margin-top:3px;}
.alert{padding:11px 15px;border-radius:var(--r);font-size:.83rem;margin-bottom:14px;display:none;}
.alert.visible{display:block;}
.alert-success{background:rgba(0,212,170,.1);border:1px solid rgba(0,212,170,.3);color:var(--acc3);}
.alert-error  {background:rgba(224,64,64,.1); border:1px solid rgba(224,64,64,.3); color:#e04040;}
.contact-info-card{background:var(--surf);border:1px solid var(--b0);border-radius:var(--rl);padding:22px;}
.contact-info-card h3{font-size:.85rem;font-weight:600;margin-bottom:14px;color:var(--tx);}
.contact-topic{padding:11px 0;border-bottom:1px solid var(--b0);}
.contact-topic:last-child{border-bottom:none;padding-bottom:0;}
.contact-topic strong{font-size:.8rem;color:var(--tx);display:block;margin-bottom:2px;}
.contact-topic p{font-size:.76rem;color:var(--mu);margin:0;line-height:1.55;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--surf);border-top:1px solid var(--b0);margin-top:auto;}
.footer-container{
  max-width:1280px;margin:0 auto;
  padding:48px 20px 40px;
  display:grid;grid-template-columns:220px 1fr;gap:48px;
}
.footer-brand{display:flex;flex-direction:column;}
.footer-logo-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--tx);font-weight:600;font-size:.9rem;
  text-decoration:none;margin-bottom:10px;
}
.footer-logo-link:hover{color:var(--tx);}
.footer-tagline{font-size:.8rem;color:var(--mu);line-height:1.6;margin-bottom:18px;}
.footer-social{display:flex;gap:7px;flex-wrap:wrap;}
.social-icon{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;border:1px solid var(--b1);color:var(--mu);text-decoration:none;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.social-icon:hover{color:var(--tx);background:var(--surf2);}
.social-icon svg{width:15px;height:15px;}
.footer-nav-group{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.footer-col-heading{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--mu);margin-bottom:13px;}
.footer-col li{margin-bottom:8px;}
.footer-col a{font-size:.8rem;color:var(--tx2);transition:color var(--t);text-decoration:none;}
.footer-col a:hover{color:var(--tx);}
.footer-bottom{
  max-width:1280px;margin:0 auto;padding:18px 20px;
  border-top:1px solid var(--b0);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.footer-bottom p{font-size:.75rem;color:var(--mu);}
.footer-bottom-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.footer-bottom-links a{color:var(--mu);font-size:.75rem;text-decoration:none;transition:color var(--t);}
.footer-bottom-links a:hover{color:var(--tx2);}
.footer-sep{color:var(--b1);font-size:.8rem;}

/* ==========================================================================
   TOAST
   ========================================================================== */
#toast-container{
  position:fixed;bottom:20px;right:20px;z-index:9999;
  display:flex;flex-direction:column-reverse;gap:7px;
  pointer-events:none;max-width:280px;
}
.toast{
  padding:10px 16px;border-radius:var(--r);font-size:.8rem;font-weight:500;
  pointer-events:auto;animation:toastIn .22s ease forwards;box-shadow:var(--sh);
}
.toast-success{background:var(--acc3);color:#0b0b12;}
.toast-error  {background:#e04040;    color:#fff;}
.toast-info   {background:var(--acc); color:#fff;}
.toast.removing{animation:toastOut .22s ease forwards;}
@keyframes toastIn {from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to  {transform:translateY(10px);opacity:0}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1060px){.tools-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .home-about-inner{grid-template-columns:1fr;gap:36px;padding:40px 20px;}
  .footer-container{grid-template-columns:1fr;gap:28px;padding:36px 20px 32px;}
  .footer-nav-group{grid-template-columns:repeat(3,1fr);}
  .contact-layout{grid-template-columns:1fr;}
}
@media(max-width:680px){
  .nav-links    {display:none!important;}
  .nav-more     {display:none!important;}
  .nav-hamburger{display:flex!important;}
  .tools-grid   {grid-template-columns:1fr 1fr;}
  .footer-nav-group{grid-template-columns:repeat(2,1fr);}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}
@media(max-width:480px){
  .tools-grid  {grid-template-columns:1fr;}
  .footer-nav-group{grid-template-columns:1fr 1fr;}
  .home-hero   {padding:48px 20px 36px;}
}