/* ==========================================================================
   kompozitprofil.com — Karakalem / Eskiz tasarım sistemi
   Tek kaynak: token + bileşen. Sayfalar yalnızca içerik ekler.
   Palet: grafit + krem kağıt + mürekkep mavisi vurgu.
   ========================================================================== */

/* ---- Fontlar (fallback'li) ---- */
:root{
  /* Renk */
  --paper:#F3ECDD;
  --paper-2:#E7DCC4;
  --paper-3:#EFE6D2;
  --ink:#2B2B2B;
  --ink-2:#4A4A4A;
  --pencil:#8A8378;
  --pencil-light:#B7AF9E;
  --accent:#2E4A6B;
  --accent-dark:#22374F;
  --accent-wash:#DfE4EC;
  --white-wash:rgba(255,255,255,.32);
  --danger:#9B3A2E;

  /* Tipografi */
  --ff-head:"Fraunces", Georgia, "Times New Roman", serif;
  --ff-body:"Spectral", Georgia, serif;
  --ff-hand:"Caveat", "Segoe Script", cursive;

  /* Ölçek / boşluk */
  --maxw:1120px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6rem;

  /* Diğer */
  --line:1.5px solid var(--ink);
  --hard-shadow:3px 3px 0 rgba(43,43,43,.20);
}

/* ---- Reset / taban ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("../img/paper-texture.png");
  background-size:520px;
  background-repeat:repeat;
  font-family:var(--ff-body);
  font-size:1.075rem;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--ff-head); line-height:1.14; font-weight:600; color:var(--ink); margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.35rem); letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1.1em}
strong{font-weight:600}
a{color:var(--accent); text-decoration:none; text-underline-offset:3px;
  border-bottom:1.5px solid var(--accent); transition:color .2s, border-color .2s}
a:hover{color:var(--accent-dark); border-color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:2px}
hr{border:0; border-top:var(--line); opacity:.5}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}
.section{padding:var(--s5) 0; position:relative}
.section--tint{background:var(--paper-2)}
.section--ink{background:var(--ink); color:var(--paper)}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--paper)}
.section--ink a{color:#cdd8e8; border-color:#cdd8e8}
.lead{font-size:1.2rem; color:var(--ink-2); max-width:60ch}
.eyebrow{display:inline-block; font-family:var(--ff-hand); color:var(--accent);
  font-size:1.4rem; line-height:1; transform:rotate(-2deg); margin-bottom:.4rem}
.center{text-align:center}
.center .lead{margin-left:auto; margin-right:auto}
.muted{color:var(--pencil)}

.grid{display:grid; gap:var(--s3)}
@media(min-width:640px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2\@md{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:980px){ .grid--6{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1120px){ .grid--6{grid-template-columns:repeat(6,1fr)} }

/* ---- Cross-hatch / ayraç ---- */
.divider{height:16px; margin:var(--s4) 0; border:0;
  background:repeating-linear-gradient(45deg,var(--pencil) 0 1px,transparent 1px 7px);
  opacity:.45}
.hatch{background:repeating-linear-gradient(45deg,var(--pencil-light) 0 1px,transparent 1px 6px)}

/* ---- Buton (elle çizilmiş) ---- */
.btn{display:inline-block; font-family:var(--ff-head); font-weight:600; font-size:1.02rem;
  cursor:pointer; padding:.72rem 1.4rem; color:#fff; background:var(--accent);
  border:2px solid var(--accent-dark); border-radius:15px 9px 16px 8px;
  box-shadow:2px 3px 0 var(--ink); transition:transform .15s, background .2s, box-shadow .15s}
.btn:hover{background:var(--accent-dark); transform:translate(-1px,-1px); box-shadow:3px 4px 0 var(--ink)}
.btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink); box-shadow:2px 3px 0 rgba(43,43,43,.25)}
.btn--ghost:hover{background:var(--white-wash); color:var(--ink)}
.btn--lg{font-size:1.12rem; padding:.85rem 1.7rem}

/* ---- Kart (kağıt + kalem çerçeve) ---- */
.card{position:relative; background:var(--white-wash);
  border:var(--line); border-radius:12px 9px 14px 8px;
  padding:var(--s3); box-shadow:var(--hard-shadow); transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-3px); box-shadow:5px 6px 0 rgba(43,43,43,.20)}
.card h3{margin-top:.2rem}
.card__fig{background:var(--paper-3); border:var(--line); border-radius:10px 8px 12px 7px;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:var(--s2)}
.card__fig img{width:100%; height:100%; object-fit:contain; padding:12px; mix-blend-mode:multiply}
.card__fig svg{width:100%; height:100%; padding:8px; mix-blend-mode:multiply}
.sec-thumb{display:block}
/* köşe "bant" aksanı */
.card--pin::before{content:""; position:absolute; top:-9px; left:22px; width:46px; height:16px;
  background:var(--accent-wash); border:1.5px solid var(--accent); transform:rotate(-4deg); opacity:.85;
  border-radius:2px}

/* ---- Header / Nav ---- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(243,236,221,.92);
  backdrop-filter:blur(3px); border-bottom:var(--line)}
.nav{display:flex; align-items:center; gap:var(--s3); padding:.7rem var(--s3); min-height:64px}
.brand{font-family:var(--ff-head); font-weight:700; font-size:1.4rem; color:var(--ink); border:0; letter-spacing:-.01em}
.brand b{color:var(--accent); font-weight:700}
.menu{display:none; gap:1.15rem; margin-left:auto; align-items:center}
.menu a{font-family:var(--ff-body); font-size:1rem; color:var(--ink); border:0; padding:.3rem 0;
  border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:var(--accent); color:var(--accent-dark)}
.nav .btn{margin-left:.4rem; padding:.5rem 1rem; font-size:.95rem}
.nav__cta{margin-left:auto}
@media(min-width:980px){ .menu{display:flex} .nav__cta{margin-left:0} }
.menu-toggle{margin-left:auto; display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; border:var(--line); border-radius:9px 7px 10px 6px; padding:.45rem .7rem; cursor:pointer;
  font-family:var(--ff-body); color:var(--ink)}
@media(min-width:980px){ .menu-toggle{display:none} }
.mobile-menu{display:none; border-bottom:var(--line); background:var(--paper)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:.7rem var(--s3); border:0; border-bottom:1px dashed var(--pencil-light); color:var(--ink)}
.mobile-menu .group{font-family:var(--ff-hand); color:var(--accent); font-size:1.2rem; padding:.6rem var(--s3) .1rem}

/* ---- Hero ---- */
.hero{padding:var(--s5) 0 var(--s4)}
.hero__grid{display:grid; gap:var(--s4); align-items:center}
@media(min-width:900px){ .hero__grid{grid-template-columns:1.05fr .95fr} }
.hero__fig{position:relative; border:var(--line); border-radius:14px 10px 16px 9px;
  background:var(--paper-3); box-shadow:var(--hard-shadow); padding:14px}
.hero__fig img{mix-blend-mode:multiply}
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}
.note{font-family:var(--ff-hand); font-size:1.25rem; color:var(--accent); transform:rotate(-1.5deg)}

/* ---- Özellik / ikon listesi ---- */
.feature{display:flex; gap:var(--s2); align-items:flex-start}
.feature__ic{flex:0 0 auto; width:52px; height:52px; border:var(--line); border-radius:12px 9px 13px 8px;
  background:var(--paper-3); display:flex; align-items:center; justify-content:center}
.feature__ic svg{width:30px; height:30px}
.feature h3{font-size:1.15rem; margin:.1rem 0 .25rem}
.feature p{margin:0; color:var(--ink-2); font-size:1rem}

/* ---- Ölçü tablosu (eskiz) ---- */
.table-wrap{overflow-x:auto; border:var(--line); border-radius:12px 9px 13px 8px; box-shadow:var(--hard-shadow); background:var(--white-wash)}
table.olcu{width:100%; border-collapse:collapse; min-width:520px; font-size:1rem}
table.olcu caption{font-family:var(--ff-hand); color:var(--accent); font-size:1.3rem; padding:.6rem; text-align:left}
table.olcu th,table.olcu td{padding:.7rem 1rem; text-align:left; border-bottom:1px dashed var(--pencil-light)}
table.olcu thead th{font-family:var(--ff-head); background:var(--paper-2); border-bottom:var(--line)}
table.olcu tbody tr:hover{background:rgba(46,74,107,.06)}
table.olcu td:first-child{font-weight:600}

/* ---- SSS akordeon ---- */
.acc{border:var(--line); border-radius:12px 9px 13px 8px; overflow:hidden; background:var(--white-wash)}
.acc__item+.acc__item{border-top:1px dashed var(--pencil-light)}
.acc__head{width:100%; text-align:left; cursor:pointer; background:transparent; border:0;
  font-family:var(--ff-head); font-size:1.12rem; color:var(--ink); padding:1rem 1.2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem}
.acc__head:hover{color:var(--accent-dark)}
.acc__sign{font-family:var(--ff-hand); color:var(--accent); font-size:1.6rem; line-height:1; transition:transform .2s}
.acc__item.open .acc__sign{transform:rotate(45deg)}
.acc__body{max-height:0; overflow:hidden; transition:max-height .28s ease}
.acc__body>div{padding:0 1.2rem 1.1rem; color:var(--ink-2)}

/* ---- Form ---- */
.form{display:grid; gap:var(--s2); max-width:560px}
.form label{font-family:var(--ff-head); font-weight:600; font-size:1rem; margin-bottom:-.4rem}
.form input,.form textarea{font-family:var(--ff-body); font-size:1.02rem; color:var(--ink);
  background:var(--paper); border:var(--line); border-radius:10px 8px 11px 7px; padding:.7rem .85rem; width:100%}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent); box-shadow:2px 2px 0 rgba(46,74,107,.25)}
.form .hint{font-size:.92rem; color:var(--pencil); margin-top:-.3rem}

/* ---- CTA şeridi ---- */
.cta-band{border:2px solid var(--ink); border-radius:16px 11px 18px 10px; background:var(--paper-3);
  box-shadow:var(--hard-shadow); padding:var(--s4); text-align:center}
.cta-band h2{margin-bottom:.3rem}

/* ---- Footer ---- */
.site-foot{background:var(--ink); color:var(--paper-2); margin-top:var(--s5); border-top:6px solid var(--accent)}
.site-foot .wrap{padding-top:var(--s4); padding-bottom:var(--s3)}
.foot-cols{display:grid; gap:var(--s3); grid-template-columns:1fr}
@media(min-width:760px){ .foot-cols{grid-template-columns:1fr 1fr} }
@media(min-width:1000px){ .foot-cols{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.site-foot h4{color:var(--paper); font-size:1.1rem}
.site-foot a{color:var(--paper-2); border-color:var(--pencil)}
.site-foot a:hover{color:#fff; border-color:#fff}
.foot-brand{font-family:var(--ff-head); font-weight:700; font-size:1.5rem; color:#fff}
.foot-brand b{color:#8fb0d8}
.copy{border-top:1px dashed var(--pencil); margin-top:var(--s3); padding-top:var(--s2);
  font-size:.95rem; color:var(--pencil-light)}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.contact-list li{display:flex; gap:.6rem; align-items:flex-start; font-size:1rem}
.contact-list svg{width:20px; height:20px; stroke:#8fb0d8; fill:none; stroke-width:1.7; flex:0 0 auto; margin-top:3px}

/* ---- Reveal animasyonu ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .btn,.card{transition:none}
}

/* ---- Açılır alt menü (masaüstü) ---- */
.menu .has-sub{position:relative}
.menu .has-sub>a::after{content:" ▾"; font-size:.8em; color:var(--pencil)}
.menu .sub{display:none; position:absolute; top:100%; left:-.6rem; z-index:60;
  min-width:238px; padding:.45rem 0; background:var(--paper);
  border:var(--line); border-radius:10px 8px 12px 7px; box-shadow:4px 5px 0 rgba(43,43,43,.18)}
.menu .has-sub:hover .sub, .menu .has-sub:focus-within .sub{display:block}
.menu .sub a{display:block; padding:.42rem .95rem; border:0; font-size:.98rem; color:var(--ink)}
.menu .sub a:hover{background:var(--paper-2); color:var(--accent-dark)}

/* ---- Yardımcılar ---- */
.stack>*+*{margin-top:var(--s2)}
.tag{display:inline-block; font-family:var(--ff-hand); font-size:1.15rem; color:var(--accent);
  border:1.5px solid var(--accent); border-radius:20px 8px 20px 8px; padding:.05rem .7rem; transform:rotate(-1deg)}
.pill-row{display:flex; flex-wrap:wrap; gap:.6rem}