/* =========================================================================
   STFA × İTÜ — Sezai Türkeş ve Feyzi Akkaya Özgün Mühendislik Ödülü
   "Engineering Dossier" stil sistemi
   ------------------------------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --ink:#0B0D14;
  --subtle:#6B6E70;
  --hairline:#D9D9D9;
  --accent:#E30613;
  --accent-dark:#820D0D;
  --accent-bright:#D40000;
  --card:#F7F7F7;
  --soft:#FAFAFA;
  --serif:"EB Garamond", Georgia, serif;
  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(200,38,28,.18);color:var(--ink);}

/* Layout */
.container{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:640px){.container{padding:0 2rem;}}
@media(min-width:1024px){.container{padding:0 3.5rem;}}

/* Type helpers */
.serif{font-family:var(--serif);letter-spacing:-0.01em;font-feature-settings:"lnum","kern";}
.mono{font-family:var(--mono);font-feature-settings:"tnum","ss01";}
.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--subtle);
}
.hairline{height:1px;background:var(--hairline);width:100%;}
.muted{color:var(--subtle);}
.accent{color:var(--accent);}
/* Başlık sonu noktası — kırmızı kare */
.dot-sq{
  display:inline-block;
  width:.24em;height:.24em;
  margin-left:.06em;
  background:var(--accent);
  vertical-align:baseline;
}

/* Header / nav */
.metabar{
  border-bottom:1px solid var(--hairline);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
}
.metabar .container{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:.5rem;padding-bottom:.5rem;
  font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);
}
.site-header{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--hairline);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
}
.site-header .container{
  display:flex;justify-content:space-between;align-items:center;
  gap:2.5rem;
  padding-top:1rem;padding-bottom:1rem;
}
.site-header .brand{flex-shrink:0;margin-right:1rem;}
.brand{display:flex;align-items:center;gap:.75rem;}
.brand-name{font-family:var(--serif);font-size:22px;line-height:1;}

/* ---- STFA marka kilidi (logo lockup) ----
   Yüklenen referans logonun kurumsal renklere uyarlanmış hâli:
   lacivert/ink metin, kırmızı "&" ve kırmızı kavisli çizgi, gri "Ödülü". */
.stfa-logo{display:inline-flex;flex-direction:column;align-items:center;text-align:center;line-height:1;font-size:20px;}
.stfa-logo__line{
  font-family:var(--serif);font-weight:600;font-style:normal;
  color:var(--ink);letter-spacing:-0.005em;white-space:nowrap;
}
.stfa-logo__line .amp{color:var(--accent);font-style:italic;font-weight:500;padding:0 .08em;}
.stfa-logo__sub{
  font-family:var(--serif);font-style:normal;color:var(--subtle);
  font-size:.72em;letter-spacing:.22em;margin-top:.45em;
  display:block;text-transform:uppercase;white-space:nowrap;
}
.stfa-logo__curve{display:block;width:100%;height:7px;margin-top:.22em;color:var(--accent);}
@media(max-width:480px){.brand-name{font-size:17px;}}
.brand-tag{
  display:none;border-left:1px solid var(--hairline);
  padding-left:.75rem;margin-left:.25rem;
}
@media(min-width:768px){.brand-tag{display:inline-block;}}

.nav{display:none;align-items:center;gap:.25rem;}
@media(min-width:768px){.nav{display:flex;}}
.nav a{
  position:relative;padding:.5rem .75rem;font-size:14px;
  color:var(--subtle);transition:color .2s;
}
.nav a:hover,.nav a.active{color:var(--ink);}
.nav a .num{font-family:var(--mono);font-size:10px;color:rgba(200,38,28,.8);margin-right:.4rem;}
.nav a.active::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:-1px;height:1px;background:var(--ink);
}
.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--accent);color:#fff;padding:.65rem 1.1rem;
  font-size:14px;font-weight:500;
  transition:background .2s;
}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--hairline);padding:.65rem 1.1rem;
  font-size:14px;color:var(--ink);transition:border-color .2s;
}
.btn-secondary:hover{border-color:var(--ink);}

/* Mobile menu (CSS only via :target) */
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--ink);padding:.5rem;cursor:pointer;
}
@media(min-width:768px){.menu-btn{display:none;}}
.mobile-nav{display:none;border-top:1px solid var(--hairline);background:var(--paper);}
.mobile-nav .container{display:block;padding-top:1rem;padding-bottom:1rem;}
.mobile-nav a{display:block;padding:.6rem 0;font-size:14px;}
.mobile-nav a .num{font-family:var(--mono);font-size:10px;color:rgba(200,38,28,.8);margin-right:.6rem;}
body:has(#m:target) .mobile-nav,
.mobile-nav.open{display:block;}

/* Sections */
section{border-bottom:1px solid var(--hairline);}
section.no-border{border-bottom:0;}
/* Yalnızca dikey padding — .container ile birlikte kullanıldığında
   yatay padding'i (mobilde sola sıfır dayanma sorunu) ezmemesi için. */
.section-pad{padding-top:5rem;padding-bottom:5rem;}
@media(max-width:640px){.section-pad{padding-top:3rem;padding-bottom:3rem;}}

/* Page intro */
.page-intro{padding-top:4rem;padding-bottom:4rem;}
@media(min-width:1024px){.page-intro{padding-top:6rem;padding-bottom:6rem;}}
.page-intro h1{
  font-family:var(--serif);
  font-size:clamp(44px,6.4vw,74px);
  line-height:1.02;letter-spacing:-.02em;margin:.75rem 0 0;
}
.page-intro p.lead{
  font-size:18.5px;line-height:1.7;color:rgba(26,26,26,.85);max-width:660px;margin-top:1.75rem;
}

/* Grid utilities */
.row{display:grid;grid-template-columns:1fr;gap:2.5rem;}
@media(min-width:1024px){
  .row.cols-12{grid-template-columns:repeat(12,1fr);}
  .col-4{grid-column:span 4;}
  .col-5{grid-column:span 5;}
  .col-6{grid-column:span 6;}
  .col-7{grid-column:span 7;}
  .col-8{grid-column:span 8;}
  .col-12{grid-column:span 12;}
}

/* Section header */
.section-header h2{
  font-family:var(--serif);
  font-size:clamp(37px,4.3vw,48px);
  line-height:1.05;letter-spacing:-.01em;margin:.75rem 0 0;white-space:pre-line;
}
.section-header .meta{display:flex;align-items:center;gap:.75rem;}
.section-header .num{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);}
.section-header p{font-size:16.5px;line-height:1.7;color:rgba(26,26,26,.8);max-width:660px;margin-top:1.25rem;}
.section-header .hairline{margin-top:2rem;max-width:120px;}

/* Fullscreen video hero */
.hero-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;          /* tam genişlik, 16:9 — kırpma yok */
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--ink);
}
.hero-video__yt{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  background:var(--ink);
}
.hero-video__yt iframe,
.hero-video__yt video{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  object-fit:cover;
}
.hero-video__cover{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ink);
  opacity:1;transition:opacity .6s ease;
}
.hero-video__cover.is-hidden{opacity:0;}
.hero-video__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,12,12,.45) 0%,rgba(12,12,12,.20) 38%,rgba(12,12,12,.70) 100%);
}
.hero-video .container{position:relative;z-index:2;width:100%;}
/* Ses aç/kapat butonu */
.hero-video__sound{
  position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .9rem;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(12,12,12,.45);
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .2s,border-color .2s;
}
@media(min-width:1024px){.hero-video__sound{right:2rem;bottom:2rem;}}
.hero-video__sound:hover{background:rgba(12,12,12,.65);border-color:rgba(255,255,255,.6);}
.hero-video__sound .ic{width:16px;height:16px;display:block;}
.hero-video__sound .ic-on{display:none;}
.hero-video__sound.is-on{background:var(--accent);border-color:var(--accent);}
.hero-video__sound.is-on .ic-off{display:none;}
.hero-video__sound.is-on .ic-on{display:block;}
.hero-video__tagline{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero-video__tagline .rule{height:1px;width:2.5rem;background:rgba(255,255,255,.4);}
.hero-video h1{
  font-family:var(--serif);
  font-size:clamp(52px,8vw,104px);
  line-height:1.08;letter-spacing:-.02em;margin:0;
  color:#fff;max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero-video__cue{
  display:flex;flex-direction:column;align-items:center;gap:.65rem;
  padding:1.75rem 0 .25rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--subtle);
}
.hero-video__cue .line{
  width:1px;height:38px;background:var(--hairline);
  animation:cuepulse 2s ease-in-out infinite;transform-origin:top;
}
@keyframes cuepulse{0%,100%{transform:scaleY(.4);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}
/* Mobil: 16:9 oranı başlık için çok kısa kalıp metni alttan kırpıyordu.
   Sabit oranı kaldırıp bölümü içeriğe göre büyütüyoruz; video object-fit:cover
   ile yine tüm alanı dolduruyor. Başlık alta yaslanıyor. */
@media(max-width:640px){
  .hero-video{
    aspect-ratio:auto;
    min-height:78vh;
    align-items:flex-end;
  }
  .hero-video .container{
    padding-top:6rem;
    padding-bottom:2.75rem;
  }
  .hero-video h1{
    font-size:clamp(40px,11vw,52px);
    max-width:none;
  }
}
@media(prefers-reduced-motion:reduce){.hero-video__cue .line{animation:none;}}

/* Hero */
.hero h1{
  font-family:var(--serif);
  font-size:clamp(52px,7vw,84px);
  line-height:.98;letter-spacing:-.02em;margin:0;white-space:pre-line;
}
.hero .lead{font-size:18.5px;line-height:1.7;color:rgba(26,26,26,.85);max-width:580px;margin-top:1.75rem;}
.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem;}
.hero-stats{
  margin-top:3rem;display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--hairline);
}
@media(min-width:640px){.hero-stats{grid-template-columns:repeat(4,1fr);}}
.hero-stats .stat{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--hairline);}
@media(min-width:640px){
  .hero-stats .stat{border-bottom:0;}
  .hero-stats .stat:not(:last-child){border-right:1px solid var(--hairline);padding-right:1rem;}
}
.hero-stats .value{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.01em;}
.hero-stats .label{margin-top:.5rem;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);}

.hero-figure{position:relative;padding:.75rem;}
.hero-figure::before,
.hero-figure::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--ink);}
.hero-figure::before{top:0;left:0;border-top:1.5px solid;border-left:1.5px solid;}
.hero-figure::after{bottom:0;right:0;border-bottom:1.5px solid;border-right:1.5px solid;}
.figure-cap{
  margin-top:.75rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--subtle);
}
.figure-cap span:first-child{max-width:260px;}
.seal{
  position:absolute;top:-1.5rem;right:-1.5rem;width:150px;height:150px;
  transform:rotate(-6deg);opacity:.95;display:none;
}
@media(min-width:1024px){.seal{display:block;}}

/* Pillars / cards grid */
.cards-grid{
  margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
}
@media(min-width:768px){.cards-grid.cols-2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:768px){.cards-grid.cols-3{grid-template-columns:repeat(3,1fr);}}
@media(min-width:768px){.cards-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.cards-grid.cols-4{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1024px){.cards-grid.cols-5{grid-template-columns:repeat(5,1fr);}}
.cards-grid > .card{background:var(--paper);padding:2rem;}
@media(min-width:1024px){.cards-grid > .card{padding:2.5rem;}}
.card .num{font-family:var(--mono);font-size:12px;color:var(--accent);}
.card h3{font-family:var(--serif);font-size:25px;margin:1.25rem 0 .5rem;line-height:1.2;}
.card p{font-size:16px;line-height:1.7;color:rgba(26,26,26,.8);margin:0;}

/* Timeline */
.timeline{margin-top:3rem;position:relative;}
.timeline::before{
  content:"";position:absolute;left:.5rem;top:0;bottom:0;width:1px;background:var(--hairline);
}
@media(min-width:768px){.timeline::before{left:50%;}}
.timeline__progress{
  position:absolute;left:.5rem;top:0;width:2px;height:0;margin-left:-.5px;
  background:var(--accent);z-index:1;transition:height .2s linear;
}
@media(min-width:768px){.timeline__progress{left:50%;}}
.timeline ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2.25rem;}
.timeline li{position:relative;padding-left:2rem;display:grid;grid-template-columns:1fr;gap:.5rem;}
@media(min-width:768px){.timeline li{padding-left:0;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}}
.timeline li::before{
  content:"";position:absolute;left:.15rem;top:.6rem;width:.7rem;height:.7rem;
  border:2px solid var(--ink);background:var(--paper);border-radius:50%;z-index:2;
  transition:background-color .35s ease, border-color .35s ease;
}
.timeline li.is-reached::before{
  background:var(--accent);border-color:var(--accent);
}
@media(prefers-reduced-motion:reduce){
  .timeline__progress{transition:none;}
  .timeline li::before{transition:none;}
}
@media(min-width:768px){
  .timeline li::before{left:50%;transform:translateX(-50%);top:50%;margin-top:-.35rem;}
}
.timeline li .stage{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}
.timeline li .ttitle{font-family:var(--serif);font-size:24px;margin-top:.25rem;}
.timeline li .tdate{font-family:var(--mono);font-size:14px;color:rgba(26,26,26,.85);}
.timeline li:nth-child(even) > div:first-child{}
@media(min-width:768px){
  .timeline li:nth-child(odd) > div:first-child{text-align:right;}
  .timeline li:nth-child(even) > div:first-child{order:2;}
  .timeline li:nth-child(even) > div:last-child{order:1;text-align:right;}
}

/* CTA strip */
.cta-strip{
  position:relative;border:1px solid var(--hairline);background:var(--paper);
  padding:2rem;display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
}
@media(min-width:1024px){
  .cta-strip{padding:3rem;grid-template-columns:2fr 1fr;}
}
.cta-strip .label{
  position:absolute;top:-.75rem;left:1.5rem;background:var(--paper);padding:0 .75rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--subtle);
}
.cta-strip h3{font-family:var(--serif);font-size:clamp(26px,3vw,34px);line-height:1.15;margin:.75rem 0 .5rem;}
.cta-strip p{color:rgba(26,26,26,.8);max-width:620px;margin:0;}

/* Founder card */
.founder{background:var(--paper);padding:2rem;}
@media(min-width:1024px){.founder{padding:3rem;}}
.founder-row{display:grid;grid-template-columns:4fr 8fr;gap:1.5rem;}
.founder .portrait{aspect-ratio:3/4;background:var(--card);border:1px solid var(--hairline);overflow:hidden;}
.founder .portrait img{width:100%;height:100%;object-fit:cover;}
.founder .years{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;}
.founder h3{font-family:var(--serif);font-size:34px;line-height:1.1;margin:.5rem 0 .25rem;}
.founder .diploma{font-family:var(--mono);font-size:12.5px;color:var(--subtle);}
.founder p{margin-top:1.5rem;font-size:16.5px;line-height:1.78;color:rgba(26,26,26,.85);}

/* Piano wire block */
.quote-callout{
  margin-top:1.5rem;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;
  border-left:2px solid var(--accent);padding-left:1.25rem;color:rgba(26,26,26,.9);
}
.kicker-box{
  margin-top:2rem;position:relative;border:1px solid var(--hairline);background:var(--card);padding:1.5rem;
}
.kicker-box .label{
  position:absolute;top:-.7rem;left:1rem;background:var(--card);padding:0 .5rem;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);
}

/* Eligibility list */
.elig-list{
  margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:0;
  list-style:none;padding:0;
}
@media(min-width:768px){.elig-list{grid-template-columns:1fr 1fr;column-gap:3rem;}}
.elig-list li{
  display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--hairline);
  font-size:16.5px;line-height:1.7;color:rgba(26,26,26,.9);
}
.elig-list li .n{
  flex-shrink:0;font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.16em;margin-top:.4rem;
}

/* Category card */
.cat-card .code{font-family:var(--serif);font-size:44px;color:var(--accent);line-height:1;}
.cat-card .small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);}
.cat-card .ctitle{font-family:var(--serif);font-size:24px;margin-top:1rem;}

/* Criteria table */
.criteria-table{border:1px solid var(--hairline);}
.criteria-table .row-c{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.25rem;border-bottom:1px solid var(--hairline);
}
.criteria-table .row-c:last-child{border-bottom:0;}
@media(min-width:640px){
  .criteria-table .row-c{grid-template-columns:80px 200px 1fr;}
}
.criteria-table .w{font-family:var(--mono);color:var(--accent);}
.criteria-table .t{font-family:var(--serif);font-size:20px;}
.criteria-table .d{color:rgba(26,26,26,.8);font-size:15.5px;line-height:1.6;}

/* Prize card */
.prize-card .rank{font-family:var(--serif);font-size:24px;margin-top:1rem;}
.prize-card .amount{font-family:var(--mono);font-size:28px;margin-top:.5rem;letter-spacing:-.01em;}
.prize-card .extras{margin-top:1rem;font-size:15px;line-height:1.65;color:rgba(26,26,26,.78);}
.prize-card .stamp{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);}

/* Jury card */
.jury-card{padding:1.5rem;}
.jury-card .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--subtle);}
.jury-card .jname{font-family:var(--serif);font-size:20px;margin-top:.75rem;}
.jury-card .inst{margin-top:.25rem;color:rgba(26,26,26,.75);font-size:13.5px;}

/* Form */
.form-shell{display:grid;grid-template-columns:1fr;gap:3rem;}
@media(min-width:1024px){.form-shell{grid-template-columns:3fr 9fr;gap:3rem;}}
.toc{position:sticky;top:6rem;align-self:start;}
.toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;}
.toc a{font-size:14px;color:rgba(26,26,26,.8);transition:color .2s;}
.toc a:hover{color:var(--accent);}
.toc .note{
  margin-top:2rem;padding:1rem;border:1px solid var(--hairline);background:var(--card);
  font-size:13px;line-height:1.6;color:rgba(26,26,26,.75);
}
.toc .note code{font-family:var(--mono);font-size:12px;}

fieldset.section-form{
  border:1px solid var(--hairline);background:var(--paper);
  padding:1.5rem;position:relative;scroll-margin-top:6rem;
}
@media(min-width:1024px){fieldset.section-form{padding:2.5rem;}}
fieldset.section-form + fieldset.section-form{margin-top:2rem;}
fieldset.section-form legend{
  padding:0 .5rem;margin-left:-.5rem;background:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
fieldset .help{font-size:13.5px;color:var(--subtle);margin:.4rem 0 1rem;}

.fields{display:grid;grid-template-columns:1fr;gap:1.5rem 2rem;margin-top:.5rem;}
@media(min-width:768px){.fields{grid-template-columns:1fr 1fr;}}
.field.full{grid-column:1/-1;}
.field label{
  display:block;font-family:var(--mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:.5rem;
}
.field label .req{color:var(--accent);margin-left:.25rem;}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=url],
.field input[type=number],
.field input[type=date],
.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--hairline);
  font:inherit;font-size:15px;color:var(--ink);padding:.65rem 0;outline:none;
  transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.field textarea{
  width:100%;background:transparent;font:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--hairline);padding:.85rem 1rem;min-height:140px;line-height:1.6;outline:none;
  transition:border-color .2s;resize:vertical;
}
.field .fhelp{margin-top:.4rem;font-size:12px;color:var(--subtle);}
.field-file{
  display:flex;gap:.75rem;align-items:center;border:1px dashed var(--hairline);
  padding:1rem;font-size:14px;color:rgba(26,26,26,.8);cursor:pointer;transition:border-color .2s;
}
.field-file:hover{border-color:rgba(26,26,26,.5);}
.field-file input[type=file]{display:none;}
.field-check{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;}
.field-check input{margin-top:.35rem;width:1rem;height:1rem;accent-color:var(--accent);}
.field-check span{font-size:14.5px;line-height:1.6;color:rgba(26,26,26,.85);}

.form-submit-row{
  display:flex;flex-direction:column;gap:1rem;justify-content:space-between;
  border-top:1px solid var(--hairline);padding-top:2rem;margin-top:2.5rem;
}
@media(min-width:640px){.form-submit-row{flex-direction:row;align-items:center;}}
.form-submit-row p{font-size:13px;color:var(--subtle);max-width:480px;margin:0;}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
@media(min-width:860px){.contact-grid{grid-template-columns:repeat(3,1fr);}}
.contact-card{background:var(--paper);padding:2rem;}
.contact-card .head{display:flex;align-items:center;gap:.6rem;}
.contact-card .head svg{width:18px;height:18px;color:var(--accent);}
.contact-card .val{font-family:var(--serif);font-size:24px;line-height:1.25;margin-top:1rem;display:block;}
.contact-card a.val:hover{color:var(--accent);}

/* Footer */
.site-footer{border-top:1px solid var(--hairline);background:var(--paper);margin-top:5rem;}
.site-footer .top{
  padding-top:3rem;padding-bottom:3rem;display:grid;grid-template-columns:1fr;gap:2.5rem;
}
@media(min-width:768px){.site-footer .top{grid-template-columns:5fr 3fr 4fr;}}
.site-footer .brand-block .name{font-family:var(--serif);font-size:24px;line-height:1;}
.site-footer h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--subtle);margin:0 0 .75rem;
}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;}
.site-footer ul a:hover{color:var(--accent);}
.site-footer .num{font-family:var(--mono);font-size:10px;color:var(--subtle);margin-right:.5rem;}
.site-footer .bottom{
  border-top:1px solid var(--hairline);
}
.site-footer .bottom .container{
  padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.4rem;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--subtle);
}
@media(min-width:768px){
  .site-footer .bottom .container{flex-direction:row;align-items:center;justify-content:space-between;}
}

/* Toast */
.toast{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;font-size:14px;
  border-radius:2px;box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(.25rem);pointer-events:auto;}
.toast.error{background:var(--accent);}

/* =========================================================================
   7 menü öğesi & yeni marka adı için ek stiller
   ========================================================================= */
.brand-name{font-size:18px !important;}
@media(min-width:1200px){.brand-name{font-size:21px !important;}}
.nav a{font-size:15px;font-weight:500;color:#3A3D40;padding:.5rem .55rem;}
@media(min-width:1200px){.nav a{font-size:16px;padding:.5rem .7rem;}}
.nav a .num{display:none;}
@media(min-width:1200px){.nav a .num{display:inline;}}

/* Sosyal medya linkleri */
.social-links{display:flex;gap:.75rem;margin-top:1.25rem;}
.social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border:1px solid var(--hairline);
  color:var(--subtle);transition:color .2s, border-color .2s;
}
.social-links a:hover{color:var(--accent);border-color:var(--accent);}

/* Plaket görseli */
.plaket-figure{
  max-width:420px;margin:2.5rem auto 0;text-align:center;
  border:1px solid var(--hairline);padding:1.5rem;background:var(--card);
}
.plaket-figure img{width:100%;height:auto;display:block;}
.plaket-figure .cap{
  margin-top:.75rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--subtle);
}

/* Milestones / tarihsel tablo (kurucular sayfası) */
.milestones{
  margin-top:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
}
@media(min-width:768px){.milestones{grid-template-columns:repeat(4,1fr);}}
.milestones .ms{
  background:var(--paper);padding:1.75rem 1.5rem;
}
.milestones .ms .year{
  font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--accent);
}
.milestones .ms .desc{
  margin-top:.75rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--subtle);line-height:1.5;
}
/* Scroll'a bağlı renklenme — JS .reveal-on ekleyince aktifleşir */
.milestones.reveal-on .ms{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.milestones.reveal-on .ms .year{color:var(--hairline);transition:color .6s ease;}
.milestones.reveal-on .ms.is-visible{opacity:1;transform:none;}
.milestones.reveal-on .ms.is-visible .year{color:var(--accent);}

/* hidden mobile yardımcısı */
@media(max-width:639px){.hidden-mobile{display:none;}}

/* =========================================================================
   Kurucular — 1943-1973 Dönemi · Quad grid
   ------------------------------------------------------------------------- */
.quad-grid{
  margin-top:3rem;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);
}
@media(min-width:768px){.quad-grid{grid-template-columns:repeat(2,1fr);}}
.quad-cell{background:var(--paper);padding:2rem 1.75rem;}
@media(min-width:1024px){.quad-cell{padding:2.5rem;}}
.quad-tag{display:flex;align-items:center;gap:.75rem;}
.quad-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);
}
.quad-cat{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--subtle);
}
.quad-cell h3{
  font-family:var(--serif);font-size:24px;line-height:1.2;margin:1rem 0 .75rem;
}
.quad-cell p{font-size:15px;line-height:1.7;color:rgba(26,26,26,.8);margin:0;}
.quad-pin{
  margin-top:2rem;padding:1.25rem 1.5rem;
  border-left:2px solid var(--accent);background:var(--card);
}
.quad-pin p{
  margin:.5rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1.55;color:var(--ink);
}

/* Büyük istatistik · 500+ İnovasyon */
.big-stat{
  padding:2rem 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.big-stat-num{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(96px,12vw,160px);line-height:.95;letter-spacing:-.04em;color:var(--accent);
}
.big-stat-num .plus{font-size:.55em;vertical-align:.35em;margin-left:.04em;}
.big-stat-label{
  display:block;margin-top:1rem;font-family:var(--mono);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
}
.big-stat-meta{
  display:block;margin-top:.75rem;font-size:14px;line-height:1.65;color:var(--subtle);
}

/* Tikli liste */
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.5rem;}
.check-list > li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:flex-start;}
.check-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--accent);color:var(--accent);
  font-family:var(--mono);font-size:13px;
}
.check-list h4{
  font-family:var(--serif);font-size:20px;line-height:1.25;margin:0 0 .35rem;
}
.check-list p{font-size:15px;line-height:1.7;color:rgba(26,26,26,.8);margin:0;}

/* Dosya kartı · 1972 ilk yurt dışı sözleşmesi */
.dossier-card{
  background:var(--ink);color:var(--paper);padding:2rem 1.75rem;border:1px solid var(--ink);
}
@media(min-width:1024px){.dossier-card{padding:2.5rem;}}
.dossier-card .accent{color:var(--accent-bright);}
.dossier-year{
  font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:-.03em;
  margin-top:1rem;color:var(--accent-bright);
}
.dossier-title{
  font-family:var(--serif);font-size:24px;line-height:1.25;margin-top:.5rem;
}
.dossier-sub{
  margin-top:.5rem;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.7);
}
.dossier-body{
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.92);
}

/* Güzergâh listesi · Yurt dışı destinasyonlar */
.route-list{padding:1.5rem 0 0;}
.route-head{
  display:flex;align-items:baseline;gap:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--hairline);
}
.route-city{font-family:var(--serif);font-size:28px;line-height:1;}
.route-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.route-points > li{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;
  padding:1.25rem 0;border-bottom:1px solid var(--hairline);
}
.route-tick{
  font-family:var(--mono);font-size:18px;color:var(--accent);line-height:1.1;
}
.route-city-name{font-family:var(--serif);font-size:22px;line-height:1.2;}
.route-meta{
  margin-top:.35rem;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--subtle);
}
.route-foot{
  margin:1.5rem 0 0;font-size:15px;line-height:1.7;color:rgba(26,26,26,.8);
}

/* Figür üst etiketi — kolon dengesinde metin yanına portre eşliği için */
.figure-eyebrow{
  display:inline-block;font-size:10.5px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;
  padding-bottom:.65rem;border-bottom:1px solid var(--hairline);
}

/* Intro mizanpaj — sol metin, sağ portre figür yan yana */
.intro-meta{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
}
.intro-meta-rule{
  display:inline-block;width:2.5rem;height:1px;background:var(--hairline);
}
.intro-tags{
  margin-top:2rem;padding-top:1.25rem;border-top:1px dashed var(--hairline);
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;color:var(--subtle);text-transform:uppercase;
}
.intro-figure{margin-top:2.5rem;height:100%;display:flex;flex-direction:column;}
.intro-figure img{
  width:100%;height:100%;min-height:250px;max-height:440px;
  object-fit:cover;object-position:center 20%;
}
@media(min-width:1024px){
  .intro-figure{margin-top:0;}
  .intro-figure img{min-height:320px;max-height:480px;}
}

/* Diptik — iki portre yan yana, kompakt kırpılmış */
.diptych{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:768px){.diptych{grid-template-columns:repeat(2,1fr);gap:2rem;}}
.portrait-compact img{
  width:100%;max-height:400px;object-fit:cover;object-position:center 18%;
}
@media(min-width:1024px){.portrait-compact img{max-height:440px;}}

/* =========================================================================
   Quad cell — Sektör ikonu + alt mono pafta satırı
   ------------------------------------------------------------------------- */
.quad-cell{position:relative;}
.quad-icon{
  position:absolute;top:1.5rem;right:1.5rem;width:64px;height:48px;
  color:var(--accent);opacity:.9;
}
@media(min-width:1024px){.quad-icon{top:2rem;right:2rem;width:72px;height:54px;}}
.quad-cell h3,
.quad-cell .quad-tag,
.quad-cell > p{padding-right:80px;}
@media(min-width:1024px){
  .quad-cell h3,
  .quad-cell .quad-tag,
  .quad-cell > p{padding-right:90px;}
}
.quad-foot{
  margin-top:1.25rem;padding-top:1rem;border-top:1px dashed var(--hairline);
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;color:var(--subtle);text-transform:uppercase;
}
.quad-dash{
  display:inline-block;width:14px;height:1px;background:var(--hairline);
}

/* Quad pin — 30 YIL büyük çerçeveli pull-quote */
.quad-pin{
  margin-top:2.25rem;padding:1.5rem 1.75rem;background:var(--card);
  border:1px solid var(--hairline);position:relative;
  display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;
}
@media(min-width:768px){.quad-pin{grid-template-columns:160px 1fr;gap:2rem;}}
.quad-pin::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.quad-pin-mark{
  display:flex;align-items:center;gap:.5rem;color:var(--accent);
}
.quad-pin-line{flex:1;height:1px;background:currentColor;opacity:.5;}
.quad-pin-year{
  font-family:var(--serif);font-size:48px;line-height:1;font-weight:600;letter-spacing:-.02em;
}
.quad-pin-unit{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;align-self:flex-end;
  padding-bottom:.5rem;
}
.quad-pin-body p{
  margin:.5rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1.55;color:var(--ink);
}

/* =========================================================================
   Big-stat — Blueprint çerçeveli dosya
   ------------------------------------------------------------------------- */
.big-stat{padding:0;border:none;display:flex;flex-direction:column;gap:1.5rem;}
.big-stat-frame{
  position:relative;padding:2.25rem 1.75rem 2rem;
  border:1px solid var(--hairline);background:var(--card);overflow:hidden;
}
.big-stat-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.big-stat-tick{
  position:absolute;width:14px;height:14px;border:1px solid var(--accent);
}
.big-stat-tick-tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.big-stat-tick-tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.big-stat-tick-bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.big-stat-tick-br{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.big-stat-scale{
  position:absolute;top:2.25rem;bottom:2rem;right:.75rem;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  pointer-events:none;
}
.big-stat-scale span{display:block;width:8px;height:1px;background:rgba(26,26,26,.3);}
.big-stat-scale span:nth-child(odd){width:14px;background:rgba(26,26,26,.5);}
.big-stat-meta-top{
  display:block;position:relative;font-size:10.5px;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;
}
.big-stat-num{
  display:block;position:relative;margin-top:.5rem;
  font-family:var(--serif);font-weight:600;
  font-size:clamp(96px,12vw,156px);line-height:.9;letter-spacing:-.04em;color:var(--accent);
}
.big-stat-num .plus{font-size:.5em;vertical-align:.4em;margin-left:.04em;}
.big-stat-label{
  display:block;position:relative;margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--hairline);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);
}
.big-stat-meta{
  margin:0;font-size:14px;line-height:1.7;color:var(--subtle);
}

/* Check-list — numaralı çipler + alt etiket */
.check-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--accent);color:var(--accent);
  background:var(--paper);
}
.check-chip .mono{font-size:11px;letter-spacing:.06em;}
.check-tag{
  margin-top:.75rem;display:inline-block;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--subtle);
  padding:.25rem .55rem;border:1px solid var(--hairline);background:var(--card);
}

/* =========================================================================
   Map — SVG mini harita çerçevesi
   ------------------------------------------------------------------------- */
.map-frame{
  margin-top:3rem;padding:1rem 1.25rem 1.25rem;
  background:var(--card);border:1px solid var(--hairline);position:relative;
}
.map-meta-top,.map-meta-bot{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;color:var(--subtle);text-transform:uppercase;
}
.map-meta-top{padding-bottom:.75rem;border-bottom:1px dashed var(--hairline);}
.map-meta-bot{padding-top:.75rem;border-top:1px dashed var(--hairline);margin-top:.5rem;}
.map-svg{
  display:block;width:100%;height:auto;margin:1rem 0;
}

/* =========================================================================
   Dossier-card — Koordinat satırı + mühür rozeti
   ------------------------------------------------------------------------- */
.dossier-card{position:relative;}
.dossier-coord{
  margin-top:.65rem;font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.6);text-transform:uppercase;
}
.dossier-stamp{
  position:absolute;right:1.5rem;bottom:1.5rem;
  width:78px;height:78px;
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-12deg);opacity:.95;pointer-events:none;
}
.dossier-stamp-ring{
  position:absolute;inset:0;border:2px solid var(--accent-bright);border-radius:50%;opacity:.7;
}
.dossier-stamp-ring::after{
  content:"";position:absolute;inset:6px;border:1px dashed var(--accent-bright);border-radius:50%;opacity:.55;
}
.dossier-stamp-text{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--accent-bright);font-weight:500;
}

/* =========================================================================
   Route-list — Numara, çubuk göstergesi, mesafe
   ------------------------------------------------------------------------- */
.route-head{flex-wrap:wrap;}
.route-coord{
  margin-left:auto;font-size:11px;letter-spacing:.18em;color:var(--subtle);text-transform:uppercase;
}
.route-points > li{
  grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;
}
.route-index{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--accent);color:var(--accent);
  font-size:12px;letter-spacing:.04em;background:var(--paper);
}
.route-dist{
  font-size:11px;letter-spacing:.16em;color:var(--accent);
  white-space:nowrap;
}
.route-bar{
  margin-top:.65rem;height:3px;background:var(--hairline);position:relative;
}
.route-bar > span{
  position:absolute;left:0;top:0;bottom:0;background:var(--accent);
}

/* =========================================================================
   Honor card — Ribbon + chip footer + büyük ikon kutusu
   ------------------------------------------------------------------------- */
.honor-card{
  position:relative;padding:0;display:flex;flex-direction:column;
  border:1px solid var(--hairline);background:var(--paper);
}
.honor-ribbon{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;
  padding:.85rem 1.25rem;background:var(--card);
  border-bottom:1px solid var(--hairline);
  font-size:10.5px;letter-spacing:.18em;color:var(--subtle);text-transform:uppercase;
}
.honor-ribbon-num{color:var(--accent);}
.honor-ribbon-cat{color:var(--ink);}
.honor-ribbon-year{color:var(--accent);}
.honor-card > .honor-mark,
.honor-card > h3,
.honor-card > p,
.honor-card > .honor-foot{margin-left:1.75rem;margin-right:1.75rem;}
@media(min-width:1024px){
  .honor-card > .honor-mark,
  .honor-card > h3,
  .honor-card > p,
  .honor-card > .honor-foot{margin-left:2.25rem;margin-right:2.25rem;}
}
.honor-mark{
  margin-top:1.5rem;align-self:flex-start;width:108px;height:108px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);border:1px solid var(--hairline);background:var(--card);
  position:relative;
}
.honor-mark::before,.honor-mark::after{
  content:"";position:absolute;width:10px;height:10px;border:1px solid var(--accent);
}
.honor-mark::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.honor-mark::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.honor-card-accent .honor-mark{background:var(--ink);color:var(--accent-bright);border-color:var(--ink);}
.honor-card-accent .honor-mark::before,
.honor-card-accent .honor-mark::after{border-color:var(--accent-bright);}
.honor-card h3{margin-top:1.25rem;}
.honor-card p{margin-top:.5rem;}
.honor-foot{
  margin-top:1.5rem;margin-bottom:1.75rem;padding-top:1rem;
  border-top:1px dashed var(--hairline);
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.honor-chip{
  font-size:10.5px;letter-spacing:.16em;color:var(--subtle);text-transform:uppercase;
  padding:.35rem .6rem;background:var(--card);border:1px solid var(--hairline);
}

/* =========================================================================
   Yapay zekâ destekli sohbet asistanı
   ------------------------------------------------------------------------- */
.chat-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;
  display:flex;align-items:center;gap:.5rem;
  padding:.8rem 1.1rem;border:0;cursor:pointer;
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  transition:background .2s ease, transform .2s ease;
}
.chat-fab:hover{background:var(--accent-dark);transform:translateY(-1px);}
.chat-fab svg{width:16px;height:16px;}
.chat-fab.is-open{display:none;}

.chat-panel{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:61;
  width:min(380px, calc(100vw - 2rem));
  height:min(560px, calc(100vh - 2rem));
  display:none;flex-direction:column;
  background:var(--paper);border:1px solid var(--hairline);
  box-shadow:0 20px 60px rgba(0,0,0,.28);overflow:hidden;
}
.chat-panel.is-open{display:flex;}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;background:var(--ink);color:#fff;
}
.chat-head .t{font-family:var(--serif);font-size:18px;letter-spacing:-.01em;}
.chat-head .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:2px;}
.chat-close{background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.8;}
.chat-close:hover{opacity:1;}

.chat-body{
  flex:1;overflow-y:auto;padding:1rem;
  display:flex;flex-direction:column;gap:.75rem;background:var(--soft);
}
.chat-msg{max-width:85%;padding:.6rem .8rem;font-size:14px;line-height:1.55;white-space:pre-wrap;}
.chat-msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--hairline);color:var(--ink);}
.chat-msg.user{align-self:flex-end;background:var(--accent);color:#fff;}
.chat-msg.err{align-self:flex-start;background:#fff0ef;border:1px solid #f3c9c6;color:var(--accent-dark);}
.chat-typing{align-self:flex-start;display:flex;gap:.25rem;padding:.7rem .8rem;}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--subtle);animation:chatblink 1.2s infinite both;}
.chat-typing span:nth-child(2){animation-delay:.2s;}
.chat-typing span:nth-child(3){animation-delay:.4s;}
@keyframes chatblink{0%,80%,100%{opacity:.25;}40%{opacity:1;}}

.chat-foot{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--hairline);background:var(--paper);}
.chat-foot textarea{
  flex:1;resize:none;border:1px solid var(--hairline);background:var(--paper);
  font-family:var(--sans);font-size:14px;color:var(--ink);padding:.55rem .65rem;
  height:42px;max-height:120px;line-height:1.4;
}
.chat-foot textarea:focus{outline:none;border-color:var(--ink);}
.chat-send{
  border:0;cursor:pointer;background:var(--ink);color:#fff;
  padding:0 1rem;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.chat-send:hover{background:var(--accent);}
.chat-send:disabled{opacity:.5;cursor:not-allowed;}
@media(prefers-reduced-motion:reduce){.chat-typing span{animation:none;}}