/* Main stylesheet for Serzen Tekstil - accessible, responsive, modern
   Critical parts are inlined in index.html for performance. This file handles layout, components and themes. */

:root{
  --bg:#F6F8FB;--nav:#1F3A5F;--accent:#E09F3E;--text:#111827;--muted:#6B7280;--card:#ffffff;--radius:10px;--shadow:0 6px 18px rgba(15,23,42,0.06)
}
html[data-theme='dark']{--bg:#0E1621;--nav:#9FB4D6;--accent:#E09F3E;--text:#F6F8FB;--muted:#9AA6B2;--card:#0F1720}

body{background:var(--bg);color:var(--text);font-size:16px}
.container{max-width:1200px;margin:0 auto;padding:2rem 1rem}

/* Hero */
.hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:56vh;padding:2rem 1rem;border-radius:12px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,58,95,0.06),rgba(224,159,62,0.04));pointer-events:none}
.hero-content{position:relative;z-index:2;max-width:900px;text-align:center;color:var(--nav)}
.hero h1{color:var(--nav);font-family:Poppins, sans-serif;font-weight:700;font-size:clamp(1.6rem,3.8vw,2.8rem);margin:0 0 .5rem;}
.lead{color:var(--dark);font-weight:600;}
.muted{color:var(--muted);opacity:1;}
.hero-ctas{display:flex;gap:.8rem;margin-top:1rem}

/* Buttons */
.btn{padding:.6rem .9rem;border-radius:10px;border:none;cursor:pointer;transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease}
.btn:focus{outline:3px solid rgba(224,159,62,0.25);outline-offset:2px}
.btn-primary{background:var(--accent);color:var(--dark)}
.btn-secondary{background:transparent;color:var(--card);border:1px solid rgba(255,255,255,0.12)}
.btn-outline{background:transparent;border:1px solid rgba(15,23,42,0.08);padding:.5rem .7rem}
.btn-ghost{background:transparent;border:1px solid transparent}
.btn:hover{transform:translateY(-3px);opacity:0.95}

/* Sections */
.section{padding:2.2rem 0}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.feature{background:var(--card);padding:1rem;border-radius:10px;box-shadow:var(--shadow)}

.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.6rem}
.card figure{margin:0}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px}

.timeline{display:flex;gap:1rem;list-style:none;padding:0;margin:1rem 0}
.timeline li{background:var(--card);padding:.8rem 1rem;border-radius:8px;box-shadow:var(--shadow)}

.metrics{display:flex;gap:1rem;margin-top:1rem}
.metric{background:var(--card);padding:1rem;border-radius:10px;flex:1;text-align:center;box-shadow:var(--shadow)}
.metric-value{font-weight:700;font-size:1.4rem;color:var(--nav)}
.metric-label{color:var(--muted)}

.partners-grid{display:flex;gap:1rem;flex-wrap:wrap}
.partner{background:linear-gradient(180deg,#f3f4f6,#e9eef8);padding:.8rem 1rem;border-radius:8px;color:var(--muted)}

/* Accordion */
.accordion{max-width:900px}
.acc-item{margin-bottom:.6rem}
.acc-btn{width:100%;text-align:left;padding:.8rem 1rem;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:var(--card);cursor:pointer}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .32s ease;padding:0 1rem}
.acc-panel.open{padding:1rem;border-left:3px solid var(--accent)}

/* Footer */
.site-footer{padding:1.2rem 0;border-top:1px solid rgba(15,23,42,0.04);background:transparent}
.footer-row{display:flex;justify-content:space-between;align-items:center}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(2,6,23,0.5)}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{background:var(--card);padding:1.2rem;border-radius:12px;max-width:520px;width:100%;box-shadow:0 12px 40px rgba(2,6,23,0.28);position:relative}
.modal-close{position:absolute;right:10px;top:8px;background:transparent;border:none;font-size:1.3rem}
.modal-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.8rem}

/* Skip link (görünürken odaklanılabilir) */
.skip-link{position:absolute;left:0;top:0;background:var(--nav);color:var(--card);padding:.5rem .75rem;border-bottom-right-radius:6px;z-index:100;transform:translateY(-120%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}

/* Nav toggle (mobil) */
.nav-toggle{display:none;margin-right:.5rem}
@media (max-width:800px){
  .nav-toggle{display:inline-flex}
  .nav-list{position:fixed;top:64px;right:0;background:var(--card);width:260px;height:calc(100% - 64px);flex-direction:column;align-items:flex-start;padding:1rem;gap:.25rem;box-shadow:0 12px 40px rgba(2,6,23,0.12);transform:translateX(105%);transition:transform .25s ease}
  .nav-list.open{transform:translateX(0)}
  .nav-list a{padding:.6rem .5rem;width:100%;display:block}
}

/* Nav list base styles: remove bullets, spacing and give accessible focus/hover states */
.nav-list{list-style:none;display:flex;gap:1rem;align-items:center;padding:0;margin:0}
.nav-list li{margin:0}
.nav-list a{display:inline-block;text-decoration:none;color:var(--text);padding:.45rem .6rem;border-radius:8px;transition:background .18s ease,color .18s ease}
.nav-list a:hover,.nav-list a:focus{background:rgba(31,58,95,0.06);color:var(--nav);outline:none}
.nav-list a.active{background:var(--nav);color:var(--card);box-shadow:var(--shadow)}

/* Responsive adjustments */
@media (max-width:1000px){.cards-grid{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:1fr}.timeline{flex-direction:column}}
@media (max-width:600px){.cards-grid{grid-template-columns:1fr}.hero-media{min-height:180px}.hero-content{padding:.6rem}.footer-row{flex-direction:column;gap:.6rem}}

/* Utility */
.hidden{display:none}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}