@font-face{font-family:Oswald;font-weight:700;font-display:swap;src:url(fonts/oswald-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-weight:700;font-display:swap;src:url(fonts/oswald-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Bevan;font-weight:400;font-display:swap;src:url(fonts/bevan-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Bevan;font-weight:400;font-display:swap;src:url(fonts/bevan-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Zilla;font-weight:400;font-display:swap;src:url(fonts/zilla-slab-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Zilla;font-weight:400;font-display:swap;src:url(fonts/zilla-slab-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --kraft:#E6CFA2;--kraft2:#DCC08C;--card:#F3E4C0;
  --ink:#241D16;--mut:#5A4A36;
  --clay:#9A3820;--must:#E1A62C;--green:#2E5B4C;--sage:#A9B393;
  --head:Oswald,"Arial Narrow",Impact,sans-serif;--slab:Bevan,Georgia,serif;--body:Zilla,Rockwell,Georgia,serif;
  --pad:clamp(18px,4.5vw,40px);--r:3px;--shadow:3px 3px 0 var(--ink);
  /* tip ölçeği: etiket, küçük, gövde, h3/lead, fiyat, h2, display */
  --fs-label:14px;--fs-small:16px;--fs-body:18px;--fs-h3:24px;--fs-price:32px;
  --fs-h2:clamp(36px,4.6vw,64px);--fs-display:clamp(48px,6.4vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:var(--fs-body);line-height:1.55;color:var(--ink);background:var(--kraft);overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .1  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:49;background:radial-gradient(ellipse at 50% 30%,transparent 55%,rgba(110,70,20,.22))}
svg{display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--card)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.board :focus-visible,footer :focus-visible,.bar :focus-visible,.demo-bar :focus-visible{outline-color:var(--must)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--card);padding:12px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:1.08;letter-spacing:.005em}
h2{font-size:var(--fs-h2);margin-bottom:12px;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:.03em}
.lead{font-size:clamp(20px,1.7vw,var(--fs-h3));line-height:1.5;max-width:32em}
.small,.note{font-size:var(--fs-small);color:var(--mut)}
.note{margin-top:18px;font-style:italic}

.demo-bar{background:var(--ink);color:var(--kraft);font-family:var(--head);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px 12px;border-bottom:4px double var(--must)}

/* etiket sekmesi */
.tab{display:inline-block;background:var(--ink);color:var(--card);font-family:var(--body);font-weight:600;font-size:var(--fs-small);padding:6px 14px 7px;letter-spacing:.02em}
.tab.sm{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-label);padding:5px 12px 4px}
.tab.clay{background:var(--clay)}.tab.green{background:var(--green)}

/* butonlar: küçük kutu etiketi, sert gölge */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;font-family:var(--head);font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--card);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,color .18s}
.btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.pri{background:var(--clay);color:#FFF4DC}
.btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:#FBF0D3}
.btn.pri:hover{background:#862F18;color:#FFF4DC}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* barber direği şeridi */
.pole{height:18px;border-block:3px solid var(--ink);position:relative;overflow:hidden;background:var(--card)}
.pole::before{content:"";position:absolute;top:0;bottom:0;left:-80px;right:0;background:repeating-linear-gradient(-45deg,var(--clay) 0 14px,var(--card) 14px 28px,var(--green) 28px 42px,var(--card) 42px 56px)}
.ribbon-h{display:grid;grid-template-rows:repeat(4,7px);height:28px}
.ribbon-h i:nth-child(1){background:var(--green)}.ribbon-h i:nth-child(2){background:var(--sage)}.ribbon-h i:nth-child(3){background:var(--must)}.ribbon-h i:nth-child(4){background:var(--clay)}
.divider{margin-top:clamp(56px,8vw,96px)}

/* header */
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;border-bottom:2px dotted var(--ink)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--slab);font-size:var(--fs-h3);line-height:1;min-height:44px}
.logo small{font-family:var(--head);font-size:var(--fs-label);letter-spacing:.18em;background:var(--ink);color:var(--card);padding:5px 8px 4px}
.hd nav{display:flex;gap:6px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-small)}
.hd nav a{text-decoration:none;padding:12px 12px;min-height:44px;border-bottom:3px solid transparent;transition:border-color .18s,background-color .18s}
.hd nav a:hover{border-color:var(--clay);background:rgba(36,29,22,.07)}
.hd nav a:active{background:rgba(36,29,22,.14)}
.hd .btn{min-height:44px}

section{padding-top:clamp(56px,7vw,88px)}
.kick{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.kick i{flex:1;border-top:2px dotted var(--ink);opacity:.6}

/* HERO */
.hero{padding-top:clamp(28px,5vw,56px)}
.hero-g{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.rib{width:100%;height:auto;overflow:visible;filter:drop-shadow(4px 5px 0 rgba(36,29,22,.18))}
.rib-m{display:none}
.hero h1{font-size:var(--fs-display);margin:16px 0 22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--clay)}
.hero .lead{margin-bottom:26px;padding-top:14px;border-top:2px dotted var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:14px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:var(--fs-small);background:var(--card);border:2px solid var(--ink);padding:8px 14px}
.status i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--clay);flex:none}
.status.open i{background:#3E8A52}
.status b{font-family:var(--head);font-size:var(--fs-small);letter-spacing:.08em;text-transform:uppercase}
.stamp{position:absolute;right:0;top:-8px;width:132px;height:132px;transform:rotate(12deg);color:var(--clay)}
.hero-copy{position:relative}
.hero-tag{display:flex;gap:10px;flex-wrap:wrap;padding-right:140px}
.stamp text{font-family:var(--head);font-weight:700;letter-spacing:.14em}

/* çerçeveli küçük resimler */
.frame{background:var(--card);border:3px solid var(--ink);color:var(--ink);box-shadow:var(--shadow);padding:14px}
.mat{padding:10px;border:0;box-shadow:var(--shadow);outline:3px solid var(--ink);outline-offset:-3px}
.mat.c1{background:var(--clay)}.mat.c2{background:var(--sage)}.mat.c3{background:var(--must)}.mat.c4{background:var(--green)}
.mat .frame{box-shadow:none;border-width:2px}
.art{width:100%;height:100%}
svg.art *{vector-effect:non-scaling-stroke}

/* FİYAT TABELASI */
.board{background:var(--ink);color:var(--card);border:4px solid var(--ink);outline:3px solid var(--must);outline-offset:-12px;padding:56px 60px;box-shadow:6px 6px 0 rgba(36,29,22,.35);position:relative}
.board-hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;font-family:var(--head);text-transform:uppercase;letter-spacing:.18em;font-size:var(--fs-label);color:var(--must)}
.board-hd span{display:inline-flex;align-items:center;gap:10px}
.board-hd svg{width:16px;height:16px;fill:currentColor;flex:none}
.board ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,6vw,72px)}
.board li{padding:18px 0 16px;border-bottom:1px solid rgba(243,228,192,.18)}
.row1{display:flex;align-items:baseline;gap:10px}
.row1 h3{color:var(--card)}
.lead-dots{flex:1;min-width:16px;border-bottom:3px dotted rgba(243,228,192,.6);transform:translateY(-5px)}
.price{font-family:var(--head);font-size:var(--fs-price);color:var(--must);white-space:nowrap;line-height:1.1}
.board li p{font-size:var(--fs-small);color:#E6D3A6;margin-top:6px;display:flex;justify-content:space-between;gap:12px}
.board li p span{font-family:var(--head);letter-spacing:.1em;font-size:var(--fs-label);text-transform:uppercase;color:var(--sage);white-space:nowrap;padding-top:3px}
.ic{display:none}

/* NEDEN */
.why{display:grid;grid-template-columns:1fr 1.1fr;gap:0 clamp(28px,6vw,80px);align-items:start}
.why h2{grid-column:1/-1;max-width:18em;margin-bottom:20px}
.ticks{list-style:none;display:grid;gap:18px}
.ticks li{background:var(--card);border:2.5px solid var(--ink);padding:20px 20px 18px;box-shadow:var(--shadow);display:grid;gap:8px;justify-items:start;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ticks li:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.ticks b{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-small);background:var(--ink);color:var(--card);padding:4px 10px 3px;margin:-20px 0 0 -20px}
.ticks span{font-size:var(--fs-small)}
.ticks li:nth-child(2) b{background:var(--green)}.ticks li:nth-child(3) b{background:var(--clay)}.ticks li:nth-child(4) b{background:var(--green)}

/* GALERİ */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,30px);margin-top:28px}
.gal figure{display:grid;gap:10px;transition:transform .3s var(--ease)}
.gal .frame{aspect-ratio:4/3}
.gal .cap{font-size:var(--fs-small);border-top:2px dotted var(--ink);padding-top:8px}
.gal figure:nth-child(odd){transform:rotate(-.6deg)}.gal figure:nth-child(even){transform:rotate(.5deg)}
.gal figure:hover{transform:rotate(0) translateY(-4px)}

/* SAATLER */
.hrs{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(28px,6vw,80px);align-items:start}
.hrs .lead{margin-top:16px}
.hrs ul{list-style:none;background:var(--ink);color:var(--card);padding:14px 28px;border:4px solid var(--ink);outline:3px solid var(--must);outline-offset:-10px;box-shadow:6px 6px 0 rgba(36,29,22,.35)}
.hrs li{display:flex;justify-content:space-between;gap:16px;padding:18px 8px;border-bottom:1px dashed rgba(243,228,192,.35);font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-h3)}
.hrs li:last-child{border-bottom:0}
.hrs li span:last-child{color:var(--must);white-space:nowrap}
.hrs li.today{background:var(--must);color:var(--ink);margin-inline:-8px;padding-inline:16px}
.hrs li.today span:last-child{color:var(--ink)}
.hrs li.today span:first-child::after{content:" · bugün";font-size:var(--fs-label);letter-spacing:.1em}
.hrs .status{margin-top:22px}

/* KONUM */
.loc{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,6vw,72px);align-items:start;margin-top:8px}
.loc .frame{background:#E9D5A8}
.loc .frame svg{width:100%;height:auto}
.loc .cap{font-size:var(--fs-small);color:var(--mut);margin-top:12px}
.ct .row{padding:14px 0;border-top:2px dotted var(--ink);display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:baseline}
.lab{font-family:var(--head);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-label);background:var(--ink);color:var(--card);padding:3px 8px 2px;justify-self:start}
.ct .row a,.ct .row .v{font-size:var(--fs-body);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.ct .row a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--clay);display:inline-block;min-height:44px;line-height:44px;padding:0;transition:text-decoration-color .18s,background-color .18s}
.ct .row a:hover{background:var(--must);text-decoration-color:var(--ink)}
.ct .btn{margin-top:22px}

footer{margin-top:clamp(64px,9vw,110px);background:var(--ink);color:var(--card);padding-bottom:20px}
footer .pole{border-block-color:var(--ink);height:20px;border-top:0}
.ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end;padding-top:32px}
.ft .logo small{background:var(--must);color:var(--ink)}
.ft p{font-size:var(--fs-small);color:#D9C69B;max-width:30em}
.ft .logo+p{margin-top:8px}

.bar{display:none}
@media(max-width:860px){
  .hero-g{grid-template-columns:1fr}
  .rib-d{display:none}.rib-m{display:block;max-width:360px}
  .stamp{width:104px;height:104px;top:-6px}
  .hero-tag{padding-right:112px}
  .hd nav{display:none}
  .board{padding:44px 36px}
  .board ul,.why,.hrs,.loc{grid-template-columns:1fr}
  .why .ticks{margin-top:28px}
  .gal{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .gal{grid-template-columns:1fr}
  .board{padding:40px 24px 32px}
  .hd .btn{padding:0 14px}
  .logo{font-size:20px}
  .ct .row{grid-template-columns:1fr;gap:4px}
  .acts .btn{flex:1 1 100%;justify-content:center}
  .hrs li{font-size:var(--fs-body)}
  .hrs ul{padding-inline:20px}
  .row1 h3{font-size:20px}
  .price{font-size:28px}
  .bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);border-top:4px double var(--must);transition:transform .35s var(--ease)}
  .bar.away{transform:translateY(100%)}
  .bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;color:var(--card);text-decoration:none;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-label);transition:background-color .18s}
  .bar a+a{border-left:1px dashed rgba(243,228,192,.4)}
  .bar a:first-child{background:var(--clay)}
  .bar a:active{background:var(--must);color:var(--ink)}
  .bar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* hareket: ölçülü. Başlangıç durumu görünür kalır (asla opacity:0), yalnızca transform/opacity. */
@keyframes pole-roll{to{transform:translateX(79.2px)}}
@keyframes rise{from{opacity:.35;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .pole.divider::before{animation:pole-roll 5s linear infinite}
  .hero-copy>*:not(.stamp){animation:rise .8s var(--ease) both}
  .hero-copy>.hero-tag{animation-delay:.05s}.hero-copy h1{animation-delay:.12s}.hero-copy .lead{animation-delay:.2s}.hero-copy .acts{animation-delay:.28s}.hero-copy .status{animation-delay:.34s}
  .js [data-reveal]{opacity:.35;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
  .js [data-reveal].in{opacity:1;transform:none}
  .js .gal figure[data-reveal]{transform:translateY(22px) rotate(0)}
  .js .gal figure[data-reveal].in:nth-child(odd){transform:rotate(-.6deg)}
  .js .gal figure[data-reveal].in:nth-child(even){transform:rotate(.5deg)}
  .js .gal figure[data-reveal].in:hover{transform:rotate(0) translateY(-4px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}