:root{
  --lake:#11100f;
  --lake2:#1d1b19;
  --felt:#1f3b31;
  --felt2:#2b5143;
  --bone:#ece6d6;
  --bone2:#e0d8c2;
  --steel:#9aa3a6;
  --copper:#c4743a;
  --copper-d:#8a4416;
  --ink:#15130f;
  --focus:#8a4416;
  --head:Rockwell,"Rockwell Nova","Roboto Slab","Courier New",Georgia,serif;
  --body:Candara,Calibri,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --label:"Franklin Gothic Medium","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --gutter:max(1.25rem,calc((100% - 1200px) / 2));
  --octave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='28'%3E%3Crect width='196' height='28' fill='%23ece6d6'/%3E%3Cpath d='M28 0V28M56 0V28M84 0V28M112 0V28M140 0V28M168 0V28M196 0V28' stroke='%2315130f' stroke-opacity='.35'/%3E%3Cg fill='%2311100f'%3E%3Crect x='20' width='16' height='17'/%3E%3Crect x='48' width='16' height='17'/%3E%3Crect x='104' width='16' height='17'/%3E%3Crect x='132' width='16' height='17'/%3E%3Crect x='160' width='16' height='17'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.65;padding-bottom:38px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);line-height:1.12;margin:0 0 .6em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.4vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.8vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.dark,.hero,.site-header,.site-footer{--focus:#f0b27a}

.eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--copper-d);margin:0 0 1rem}
.dark .eyebrow,.hero .eyebrow,.atmo-box .eyebrow{color:var(--copper)}

/* Buttons & links */
.btn{display:inline-block;font-family:var(--label);font-size:1rem;letter-spacing:.03em;padding:.85rem 1.5rem;border:2px solid transparent;border-radius:2px;text-decoration:none;cursor:pointer;line-height:1.2;transition:transform .15s,background .15s,color .15s}
.btn-copper{background:var(--copper);color:var(--lake);border-color:var(--copper);font-weight:700}
.btn-copper:hover{background:#d8894f;border-color:#d8894f}
.btn-ghost{border-color:var(--bone);color:var(--bone);background:transparent}
.btn-ghost:hover{background:var(--bone);color:var(--lake)}
.textlink{color:var(--copper-d);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.textlink:hover{text-decoration-color:var(--ink)}
.dark .textlink,.hero .textlink{color:#f0b27a}

/* Header */
.site-header{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding:.7rem var(--gutter);background:var(--lake);color:var(--bone);border-bottom:2px solid var(--copper)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.15rem}
.site-nav{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.site-nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-nav ul a{text-decoration:none;font-family:var(--label);letter-spacing:.04em;padding:.4rem 0;border-bottom:2px solid transparent}
.site-nav ul a:hover{border-bottom-color:var(--copper)}
.header-cta{padding:.6rem 1.1rem}
.menu-btn{display:none;font-family:var(--label);background:transparent;color:var(--bone);border:2px solid var(--bone);padding:.5rem 1rem;border-radius:2px;cursor:pointer;font-size:1rem}
@media (max-width:899px){
  .js .menu-btn{display:inline-block}
  .site-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:1rem;padding:.5rem 0 1rem}
  .site-nav ul{flex-direction:column;gap:.2rem}
  .site-nav ul a{display:block;padding:.7rem 0;border-bottom:1px solid rgba(236,230,214,.2)}
  .header-cta{text-align:center}
  .js .site-nav{display:none}
  .js .site-nav.open{display:flex}
}

/* Sections */
main section{position:relative;padding:calc(clamp(4rem,8vw,7rem) + 28px) var(--gutter) clamp(3.5rem,7vw,6.5rem)}
main section + section::before{content:"";position:absolute;left:0;right:0;top:0;height:28px;background:var(--octave) repeat-x left top/196px 28px}
.hero{padding-top:clamp(3.5rem,7vw,6rem)!important}

/* Hero */
.hero{background:radial-gradient(ellipse at 85% 10%,rgba(196,116,58,.22),transparent 55%),var(--lake);color:var(--bone);display:grid;gap:3rem;align-items:center;overflow:hidden}
.hero::after{content:"88";position:absolute;right:-1rem;bottom:-3rem;font-family:var(--head);font-weight:700;font-size:clamp(10rem,32vw,28rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(196,116,58,.28);pointer-events:none;z-index:0}
.hero-text,.hero-img{position:relative;z-index:1}
.hero h1{max-width:18ch}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:52ch;color:#e6dfcd}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin:1.8rem 0 1.2rem}
.note{font-size:.95rem;color:#c3bcab;max-width:52ch}
.hero-img{margin:0;border:1px solid var(--copper);box-shadow:12px 12px 0 var(--felt)}
.hero-img img{width:100%}
@media (min-width:900px){.hero{grid-template-columns:1.05fr .95fr}}
@media (max-width:899px){.hero-img{box-shadow:8px 8px 0 var(--felt);margin-right:8px}}

/* Split layouts */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split.reverse{grid-template-columns:1.05fr .95fr}
}
.split figure{margin:0}

/* Story */
.hikaye{background:var(--bone)}
.story-img{position:relative}
.story-img img{width:100%;border:1px solid var(--ink)}
.story-img::after{content:"";position:absolute;left:-12px;bottom:-12px;width:55%;height:40%;border-left:6px solid var(--copper);border-bottom:6px solid var(--copper);z-index:-1}
.story-text p{max-width:56ch}

/* Services */
.hizmetler{background:var(--bone2)}
.hizmetler > h2{max-width:20ch}
.cards{display:grid;gap:1.25rem;margin-top:2.5rem}
@media (min-width:700px){.hizmetler .cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .hizmetler .cards{grid-template-columns:repeat(6,1fr)}
  .hizmetler .card{grid-column:span 2}
  .hizmetler .card:nth-child(1),.hizmetler .card:nth-child(2){grid-column:span 3}
}
.card{background:var(--bone);border-top:6px solid var(--ink);padding:1.6rem 1.5rem 1.2rem;position:relative}
.card:nth-child(even){border-top-color:var(--copper-d)}
.nota{display:block;font-family:var(--head);font-size:2.4rem;font-weight:700;color:var(--copper-d);line-height:1;margin-bottom:.8rem}
.card p{max-width:50ch}
.cta-band{margin-top:3rem;padding:1.8rem clamp(1.2rem,3vw,2.2rem);background:var(--lake);color:var(--bone);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;border-left:8px solid var(--copper);--focus:#f0b27a}
.cta-band p{flex:1 1 320px;margin:0;font-size:1.1rem}
.cta-band .textlink{color:#f0b27a}

/* Pricing */
.fiyatlar{background:var(--felt);color:var(--bone)}
.fiyatlar h2{max-width:22ch}
.plans{margin-top:2.5rem;align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{background:var(--lake);border:1px solid rgba(236,230,214,.25);padding:1.8rem 1.6rem;display:flex;flex-direction:column;align-items:flex-start}
.plan.featured{border:2px solid var(--copper);background:var(--lake2)}
.plan .fiyat{font-family:var(--head);font-weight:700;font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.15;color:#f0b27a;margin-bottom:1rem}
.plan p:not(.fiyat){flex:1}
.plan .btn{margin-top:.6rem}
.fine{margin-top:2rem;max-width:66ch;color:#dcd5c2}

/* Why */
.neden{background:var(--bone)}
.why-text h3{margin-top:1.6rem;font-size:1.25rem}
.why-text p{max-width:54ch}
.why-imgs{position:relative;padding-bottom:18%;margin:0 0 0 0}
.why-imgs figure{margin:0}
.im-a{width:72%;margin-left:auto}
.im-b{width:52%;position:absolute;left:0;bottom:0;border:8px solid var(--bone)}
.why-imgs img{width:100%}
.im-a img{border:1px solid var(--ink)}
@media (max-width:899px){.why-imgs{order:-1}}

/* Atmosphere */
.atmosfer{background:var(--lake);padding-left:0!important;padding-right:0!important;padding-bottom:0!important;color:var(--bone)}
.atmosfer figure{margin:0}
.atmosfer img{width:100%;height:clamp(300px,52vw,640px);object-fit:cover}
.atmo-box{background:var(--lake);padding:2rem var(--gutter) 3rem}
.atmo-box p:not(.eyebrow){max-width:56ch}
@media (min-width:900px){
  .atmosfer{padding-bottom:0!important}
  .atmo-box{position:absolute;left:var(--gutter);bottom:2.5rem;max-width:520px;padding:2rem 2.2rem 1.4rem;background:rgba(17,16,15,.9);border-left:6px solid var(--copper)}
  .atmosfer{padding-top:28px!important}
}

/* Process */
.surec{background:var(--bone2)}
.proc-img img{width:100%;border:1px solid var(--ink)}
.steps{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 1.4rem 4rem;margin-bottom:1.2rem;border-bottom:1px solid rgba(21,19,15,.25)}
.steps li:last-child{border-bottom:0;margin-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.2rem;font-family:var(--head);font-weight:700;font-size:2.8rem;line-height:1;color:var(--copper-d)}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;max-width:46ch}

/* FAQ */
.sss{background:var(--bone)}
.sss h2{max-width:20ch}
.faq{margin-top:2rem;max-width:860px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid rgba(21,19,15,.35)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 0;font-family:var(--head);font-weight:700;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-size:1.8rem;color:var(--copper-d);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 3rem 1.3rem 0;max-width:62ch;margin:0}

/* Contact */
.iletisim{background:radial-gradient(ellipse at 10% 100%,rgba(31,59,49,.7),transparent 60%),var(--lake);color:var(--bone)}
.contact-grid{align-items:start}
.contact-text p:not(.eyebrow){max-width:50ch}
.form{background:var(--lake2);border:1px solid rgba(236,230,214,.25);border-top:6px solid var(--copper);padding:1.8rem clamp(1.2rem,3vw,2rem)}
.form p{margin:0 0 1.1rem}
.form label{display:block;font-family:var(--label);letter-spacing:.05em;font-size:.95rem;margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;font:inherit;color:var(--ink);background:var(--bone);border:2px solid var(--bone);border-radius:2px;padding:.7rem .8rem}
.form textarea{resize:vertical;min-height:130px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid #f0b27a;outline-offset:2px}
.form .btn{width:100%;font-size:1.1rem}
@media (min-width:500px){.form .btn{width:auto}}

/* Footer */
.site-footer{background:var(--lake);color:var(--bone);padding:3rem var(--gutter) 4.5rem;display:grid;gap:1.5rem 3rem;border-top:2px solid var(--copper)}
.site-footer p{margin:0 0 .4rem;max-width:44ch}
.foot-name{font-family:var(--head);font-weight:700;font-size:1.4rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-footer a{color:#f0b27a}
.copy{color:#b8b19f;font-size:.9rem}
@media (min-width:800px){.site-footer{grid-template-columns:1.4fr 1fr auto;align-items:start}}

/* Signature: piano keys strip */
.keys{position:fixed;left:0;right:0;bottom:0;height:38px;z-index:60;background:var(--lake);border-top:2px solid var(--copper);overflow:hidden}
.keys:empty,.keys-readout:empty{display:none}
.keys .w,.keys .b{position:absolute;top:0;cursor:pointer;transition:transform .12s ease-out,background .2s}
.keys .w{bottom:0;width:calc(100% / 52);background:var(--bone);border-right:1px solid rgba(17,16,15,.45);transform:translateY(calc(var(--d,0) * 6px))}
.keys .b{height:60%;width:calc(100% / 52 * .58);background:var(--lake2);border:1px solid #000;border-top:0;z-index:2;transform:translate(-50%,calc(var(--d,0) * 5px))}
.keys .w.on{background:var(--copper)}
.keys .b.on{background:var(--copper-d);border-color:var(--copper)}
.keys-readout{position:fixed;right:10px;bottom:46px;z-index:61;background:var(--lake);color:var(--bone);font-family:var(--label);letter-spacing:.06em;font-size:.82rem;padding:.35rem .7rem;border-left:4px solid var(--copper);pointer-events:none}
.keys-readout strong{color:#f0b27a;font-weight:700;margin-right:.4rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .keys .w,.keys .b{transform:none}
  .keys .b{transform:translateX(-50%)}
}

/* inner pages */
/* Inner pages: compact hero, small helpers. All new classes use the pg- prefix. */
.hero.pg-hero{grid-template-columns:1fr;padding-bottom:clamp(3rem,6vw,5rem)}
.pg-hero::after{font-size:clamp(7rem,22vw,16rem);bottom:-1.5rem}
.pg-hero h1{max-width:20ch;font-size:clamp(2rem,4.6vw,3.6rem);overflow-wrap:break-word}
.pg-hero .lead{max-width:56ch}

/* Service cards with a price line */
.pg-cards .card{display:flex;flex-direction:column}
.pg-cards .card .pg-order{margin-top:auto;margin-bottom:.4rem}
.pg-price{font-family:var(--head);font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--copper-d);margin:.4rem 0 .8rem}

/* Single-column text blocks */
.pg-narrow{max-width:760px}
.pg-narrow p{max-width:60ch}
.pg-list{margin:0 0 1.2em;padding-left:1.3rem;max-width:56ch}
.pg-list li{margin-bottom:.6rem;padding-left:.2rem}
.pg-list li::marker{color:var(--copper-d)}

/* Closing call-to-action section */
.pg-closing h2{max-width:22ch}
.pg-closing p:not(.eyebrow){max-width:56ch}
.pg-closing .actions{align-items:center;margin-bottom:0}

@media (max-width:480px){
  .pg-hero .actions .btn{width:100%;text-align:center}
  .pg-closing .actions .btn{width:100%;text-align:center}
}

.wpf-legal { padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 4vw, 2rem); }
.wpf-legal .wpf-legal__inner { max-width: 72ch; margin: 0 auto; }
.wpf-legal .wpf-legal__inner h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.1; margin: .2em 0 .8em; }
.wpf-legal .wpf-legal__inner h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.25; margin: 2.2em 0 .6em; }
.wpf-legal .wpf-legal__inner p, .wpf-legal .wpf-legal__inner li { line-height: 1.75; max-width: none; }
.wpf-legal .wpf-legal__inner ul { padding-left: 1.2em; margin: 0 0 1em; }
.wpf-legal .wpf-legal__inner li { margin: .35em 0; list-style: disc; }
.wpf-legal .wpf-legal__inner a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.wpf-legal .wpf-legal__meta { font-size: .875rem; opacity: .7; margin: 0; }
.wpf-legal .wpf-legal__table { overflow-x: auto; margin: 1em 0 1.5em; }
.wpf-legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.wpf-legal th, .wpf-legal td { text-align: left; vertical-align: top; padding: .7em .8em; border-bottom: 1px solid rgba(127,127,127,.3); }
.wpf-legal code { font-size: .85em; word-break: break-word; }
.wpf-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; grid-column: 1 / -1;
  width: 100%; box-sizing: border-box; padding: 1.1rem clamp(1.25rem, 4vw, 2rem) 0; font-size: .875rem; }
.wpf-legal-links a { color: inherit; opacity: .85; text-decoration: underline; text-underline-offset: .15em; }
.wpf-legal-links a:hover, .wpf-legal-links a:focus-visible { opacity: 1; }

.wpf-consent { position: fixed; z-index: 99998; left: 16px; right: 16px; bottom: 16px; max-width: 27rem; box-sizing: border-box;
  padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(127,127,127,.28); box-shadow: 0 14px 44px rgba(0,0,0,.24);
  font-size: 15px; line-height: 1.55; text-align: left; }
.wpf-consent[hidden] { display: none; }
.wpf-consent .wpf-consent__title { margin: 0 0 6px; font-weight: 700; font-size: 1.05em; }
.wpf-consent .wpf-consent__text { margin: 0 0 16px; max-width: none; }
.wpf-consent .wpf-consent__text a { color: inherit; text-decoration: underline; }
.wpf-consent .wpf-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wpf-consent .wpf-consent__actions button { cursor: pointer; margin: 0; width: auto; }
.wpf-consent .wpf-consent__primary, .wpf-consent .wpf-consent__secondary { font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; }
.wpf-consent .wpf-consent__primary { background: #1c1b19; color: #fff; border: 1px solid #1c1b19; }
.wpf-consent .wpf-consent__secondary { background: transparent; color: inherit; border: 1px solid currentColor; }
.wpf-consent button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }