/* ============================================================
   CaffeFin — ön kapı stil sistemi
   Tasarım sistemi v1 (sıvı cam + krem/bordo) uygulaması.
   Kurallar: 6 punto kademesi · 2 aile · gölge yok, hairline var ·
   tek vurgu rengi · cam yalnız arkasında doku olan yüzeylerde.
   app.css'e DOKUNULMAZ — eski sayfalar onu kullanmaya devam eder.
   ============================================================ */

@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 800;
  font-display:swap;src:url("fonts/inter-latin.woff2") format("woff2");
}
/* DİKKAT — dosyalar ters: "playfair-display-latin.woff2" EĞİK tasarımı,
   "…-italic-latin.woff2" DİK tasarımı içeriyor. Tarayıcıda ölçüldü
   (140px'te 'H' harfi: birinci dosya 24px kayma, ikinci dosya 0).
   app.css aynı ters eşlemeyi taşıyor ve canlı sitede tüm başlıklar bu
   yüzden italik çıkıyor. Burada doğru eşlemeyi kuruyoruz. */
@font-face{
  font-family:"Playfair Display";font-style:normal;font-weight:600 700;
  font-display:swap;src:url("fonts/playfair-display-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display";font-style:italic;font-weight:600 700;
  font-display:swap;src:url("fonts/playfair-display-latin.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root{
  --paper:#FBF9F5; --paper-2:#F4F2EC; --paper-3:#EDEAE2; --card:#FFFFFF;
  --ink:#2D2C28; --ink-2:#65635D; --ink-3:#6E6A63;

  --accent:#8B1A1A; --accent-text:#8B1A1A; --accent-wash:#F6E9E9;
  --on-accent:#FAF8F5;

  --hair:rgba(45,44,40,.10); --hair-2:rgba(45,44,40,.055); --hair-strong:rgba(45,44,40,.18);

  --glass-tint:rgba(251,249,245,.58);
  --glass-tint-deep:rgba(251,249,245,.78);
  --glass-edge:rgba(255,255,255,.72);
  --glass-rim:rgba(45,44,40,.09);
  --glass-blur:26px; --glass-sat:1.7;

  --ok:#2F5D3A; --deep:#241F1C; --deep-ink:#EFEAE1;
  --ill:#8B1A1A;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* 6 kademe — başka punto kullanılmaz */
  --t-meta:12.5px; --t-label:14px; --t-body:16px;
  --t-head:22px;   --t-title:clamp(26px,3.4vw,34px);
  --t-display:clamp(40px,6.2vw,66px);

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-full:999px;
  --wrap:1180px;
}
/* TEK TEMA KARARI (2026-07-30): pazarlama sitesi her zaman krem kâğıt
   dünyasında yaşar — koyu mod YOK. Markanın kimliği krem/bordo; koyu
   ekranda bu kimlik çöküp jenerik siyaha dönüyordu. Koyu blok tek yerde
   ve bilinçli: karne bölümü (--deep espresso). Uygulamanın kendi içi
   (app.caffefin) çift temalı kalır; bu karar yalnız vitrin için. */

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
@media(max-width:640px){.wrap{padding:0 18px;}}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
a{color:var(--accent-text);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;z-index:60;background:var(--card);border:1px solid var(--hair-strong);border-radius:var(--r-md);padding:10px 16px;}

h1,h2,h3,h4,p{margin:0;}
.d{font-family:var(--serif);font-weight:600;font-size:var(--t-display);line-height:1.03;letter-spacing:-.02em;text-wrap:balance;}
.ti{font-family:var(--serif);font-weight:600;font-size:var(--t-title);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;}
.he{font-size:var(--t-head);font-weight:600;line-height:1.28;}
.bo{font-size:var(--t-body);}
.la{font-size:var(--t-label);}
.me{font-size:var(--t-meta);color:var(--ink-3);}

/* ---------- sıvı cam ---------- */
.glass{
  position:relative;
  background:var(--glass-tint);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-rim);
  border-radius:var(--r-xl);
  color:var(--ink);
}
.glass::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,var(--glass-edge),transparent 42%);
  mix-blend-mode:normal;opacity:.55;
}
.glass-deep{background:var(--glass-tint-deep);}

@media (prefers-reduced-transparency:reduce){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper-2);border-color:var(--hair);}
  .glass-deep{background:var(--card);}
  .glass::before{display:none;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--paper-2);border-color:var(--hair);}
  .glass-deep{background:var(--card);}
  .glass::before{display:none;}
}
@media (forced-colors:active){
  .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:Canvas;border:1px solid CanvasText;}
  .glass::before{display:none;}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;border-radius:0;border-left:0;border-right:0;border-top:0;
  border-bottom:1px solid var(--glass-rim);}
.nav-in{display:flex;align-items:center;gap:26px;height:64px;}
.brand{font-family:var(--serif);font-weight:600;font-size:var(--t-head);text-decoration:none;color:inherit;letter-spacing:-.01em;min-height:44px;display:inline-flex;align-items:center;}
.nav-links{display:flex;gap:22px;}
.nav-links a{font-size:var(--t-label);color:var(--ink);opacity:.72;text-decoration:none;}
.nav-links a:hover{opacity:1;}
@media(max-width:820px){.nav-links{display:none;}}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center;}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid transparent;border-radius:var(--r-md);padding:10px 18px;
  font:inherit;font-size:var(--t-label);font-weight:600;text-decoration:none;cursor:pointer;
  transition:opacity .16s ease,background .16s ease;}
.btn-solid{background:var(--ink);color:var(--paper);}
.btn-solid:hover{opacity:.88;}
.btn-ghost{border-color:var(--hair-strong);color:var(--ink);background:none;font-weight:500;}
.btn-ghost:hover{background:var(--paper-3);}
.btn-accent{background:var(--accent);color:var(--on-accent);}
.btn-accent:hover{filter:brightness(1.08);}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:-2;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-wash{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(251,249,245,.55),rgba(251,249,245,.22) 45%,rgba(251,249,245,.88));}
.hero-in{padding:74px 0 64px;}
@media(max-width:640px){.hero-in{padding:48px 0 44px;}}
.hero .eyebrow{font-size:var(--t-meta);font-weight:600;color:var(--ink);opacity:.72;margin-bottom:16px;}
.hero .d{margin-bottom:16px;}
.hero .d em{font-style:italic;color:var(--accent-text);}
.hero .lede{font-size:var(--t-body);color:var(--ink);opacity:.88;max-width:46ch;margin-bottom:28px;}

.search{display:flex;align-items:center;gap:4px;padding:7px;border-radius:var(--r-lg);max-width:560px;}
.search .f{flex:1;padding:8px 14px;min-width:0;}
.search .f label{display:block;font-size:var(--t-meta);font-weight:600;color:var(--ink);opacity:.7;}
.search .f input{border:0;background:none;font:inherit;font-size:var(--t-body);color:var(--ink);width:100%;padding:2px 0 0;outline:none;}
.search .f input::placeholder{color:var(--ink);opacity:.55;}
.search .sep{width:1px;height:32px;background:var(--glass-rim);flex:none;}
.search .go{width:44px;height:44px;border:0;border-radius:var(--r-md);background:var(--accent);
  display:grid;place-items:center;flex:none;cursor:pointer;}
.search .go:hover{filter:brightness(1.08);}
.search .go svg{width:18px;height:18px;stroke:var(--on-accent);}

.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;}
.chip{font:inherit;font-size:var(--t-label);border:1px solid var(--hair-strong);background:var(--glass-tint-deep);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);border-radius:var(--r-full);min-height:44px;padding:7px 15px;cursor:pointer;
  display:inline-flex;gap:7px;align-items:center;transition:background .15s ease,border-color .15s ease;}
.chip:hover{border-color:var(--ink-3);}
.chip .c{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:var(--t-meta);color:var(--ink-3);}
.chip[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-text);font-weight:600;}
.chip[aria-pressed="true"] .c{color:var(--accent-text);}
@media (prefers-reduced-transparency:reduce){.chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card);}}

/* ---------- bölüm iskeleti ---------- */
.sec{padding:76px 0;}
@media(max-width:640px){.sec{padding:52px 0;}}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:22px;margin-bottom:30px;}
.sec-head .note{font-size:var(--t-label);color:var(--ink-3);max-width:36ch;}

/* ---------- kafe kartları ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.cards{grid-template-columns:1fr;}}
.cafe{background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:border-color .18s ease,transform .18s ease;}
.cafe:hover{border-color:var(--hair-strong);transform:translateY(-2px);}
.cafe .shot{aspect-ratio:4/3;position:relative;background:var(--paper-3);overflow:hidden;}
.cafe .shot svg{position:absolute;inset:0;width:100%;height:100%;}
.cafe .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;}
.cafe:hover .shot img{transform:scale(1.03);}
.cafe .live{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-meta);border-radius:var(--r-full);padding:4px 11px;color:var(--ink);
  background:var(--glass-tint-deep);border:1px solid var(--glass-rim);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);}
.cafe .live i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block;}
.cafe .body{padding:14px 16px 16px;}
.cafe .body h3{font-size:var(--t-body);font-weight:600;margin-bottom:3px;}
.cafe .facts{font-size:var(--t-label);color:var(--ink-2);}
.cafe .facts .dot{color:var(--ink-3);margin:0 5px;}

/* ---------- adımlar ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:30px;}}
.step svg{width:76px;height:54px;margin-bottom:14px;}
.step h3{font-family:var(--serif);font-weight:600;font-size:var(--t-head);margin-bottom:8px;}
.step p{font-size:var(--t-label);color:var(--ink-2);max-width:34ch;}

/* ---------- karne / dürüstlük ---------- */
.method{background:var(--deep);color:var(--deep-ink);border-radius:var(--r-xl);padding:52px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media(max-width:860px){.method{grid-template-columns:1fr;padding:32px;gap:30px;}}
.method .ti{color:var(--deep-ink);margin-bottom:14px;}
.method p{font-size:var(--t-label);color:color-mix(in srgb,var(--deep-ink) 76%,transparent);max-width:40ch;}
.method p+p{margin-top:12px;}
.sheet{background:color-mix(in srgb,var(--deep-ink) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--deep-ink) 16%,transparent);border-radius:var(--r-lg);overflow:hidden;}
.sheet .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;border-bottom:1px solid color-mix(in srgb,var(--deep-ink) 12%,transparent);}
.sheet .top b{font-family:var(--serif);font-weight:600;font-size:var(--t-head);}
.sheet .top span{font-size:var(--t-meta);color:color-mix(in srgb,var(--deep-ink) 66%,transparent);}
.sheet .row{display:flex;align-items:center;gap:14px;padding:11px 20px;
  border-bottom:1px solid color-mix(in srgb,var(--deep-ink) 9%,transparent);}
.sheet .row .lbl{flex:1;font-size:var(--t-label);}
.sheet .row .track{width:88px;height:5px;border-radius:3px;flex:none;overflow:hidden;
  background:color-mix(in srgb,var(--deep-ink) 16%,transparent);}
.sheet .row .track i{display:block;height:100%;border-radius:3px;
  background:color-mix(in srgb,var(--deep-ink) 62%,transparent);}
.sheet .row .v{width:112px;text-align:right;flex:none;font-size:var(--t-label);}
.sheet .row .v .w{font-size:var(--t-meta);color:color-mix(in srgb,var(--deep-ink) 66%,transparent);margin-right:7px;}
.sheet .row .v .n{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;}
.sheet .row.thin .lbl{color:color-mix(in srgb,var(--deep-ink) 66%,transparent);}
.sheet .row.thin .track{background:repeating-linear-gradient(-45deg,
  color-mix(in srgb,var(--deep-ink) 16%,transparent) 0 4px,transparent 4px 8px);}
.sheet .row.thin .v{font-size:var(--t-meta);color:color-mix(in srgb,var(--deep-ink) 76%,transparent);}
.sheet .why{padding:0 20px 12px;font-size:var(--t-meta);
  color:color-mix(in srgb,var(--deep-ink) 62%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--deep-ink) 9%,transparent);}
.sheet .prov{padding:12px 20px;font-size:var(--t-meta);
  background:color-mix(in srgb,var(--deep-ink) 5%,transparent);
  color:color-mix(in srgb,var(--deep-ink) 66%,transparent);
  display:flex;flex-wrap:wrap;gap:4px 10px;}
.sheet .prov b{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;
  color:color-mix(in srgb,var(--deep-ink) 88%,transparent);}

/* ---------- buddy ---------- */
.buddy{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;}
@media(max-width:860px){.buddy{grid-template-columns:1fr;gap:28px;}}
.buddy-art svg{width:100%;max-width:390px;height:auto;}
.buddy p{font-size:var(--t-body);color:var(--ink-2);max-width:42ch;}
.buddy .quiet{font-size:var(--t-label);color:var(--ink-3);border-left:2px solid var(--hair-strong);
  padding-left:15px;margin-top:20px;max-width:40ch;}

/* ---------- kapanış ---------- */
.close{text-align:center;padding:92px 0;border-top:1px solid var(--hair);}
.close .ti{margin-bottom:14px;}
.close p{color:var(--ink-2);max-width:44ch;margin:0 auto 28px;}
.close-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.play{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair-strong);
  border-radius:var(--r-md);padding:9px 18px;text-decoration:none;color:var(--ink);}
.play:hover{background:var(--paper-3);}
.play svg{width:20px;height:20px;fill:currentColor;}
.play b{display:block;font-size:var(--t-label);font-weight:600;line-height:1.2;}
.play small{font-size:var(--t-meta);color:var(--ink-3);}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--hair);padding:30px 0 46px;}
.foot-in{display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:var(--t-label);}
.foot-in a{color:var(--ink-3);text-decoration:none;}
.foot-in a:hover{color:var(--ink);}
.foot-in .brand{font-size:var(--t-head);}
.foot-in .sp{margin-left:auto;color:var(--ink-3);font-size:var(--t-meta);}