/* Hanedan Menajerlik — site stilleri
   Renkler logodan: bordo, mürekkep, altın ve kâğıt. */
:root{
  --ink:#230509;
  --wine:#6c151e;
  --wine2:#8a1f2c;
  --gold:#d6b57c;
  --gold-soft:rgba(214,181,124,.38);
  --paper:#f7f4f2;
  --stone:#ece4de;
  --serif:"Gloock","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1rem,5vw,5rem);
  --bar-h:4.5rem;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 1rem);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font:400 1.0625rem/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--gold);color:var(--ink);padding:.6rem 1rem;border-radius:.5rem;font-weight:600}
.skip:focus{top:1rem}

/* ---------- Üst çubuk ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);display:flex;align-items:center;gap:1.5rem;padding:0 var(--pad);padding-top:env(safe-area-inset-top,0px);transition:background .35s,box-shadow .35s,height .35s}
.bar.solid{background:rgba(35,5,9,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--gold-soft)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:1.45rem;letter-spacing:.005em;flex:none}
.brand img{width:40px;height:40px;border-radius:50%}
.links{display:flex;gap:2rem;margin:0 auto;font-weight:500;font-size:.98rem}
.links a{position:relative;padding:.3rem 0;color:rgba(247,244,242,.86);transition:color .2s}
.links a:hover{color:var(--gold)}
.links .menu-cta{display:none}
.tools{display:flex;align-items:center;gap:.9rem;flex:none;margin-left:auto}
.lang{display:flex;padding:3px;border-radius:99px;border:1px solid var(--gold-soft);font-size:.8rem;font-weight:600;letter-spacing:.04em}
.lang a{min-width:2.4rem;padding:.38rem .55rem;text-align:center;border-radius:99px;color:rgba(247,244,242,.75);transition:background .2s,color .2s}
.lang a:hover{color:var(--paper)}
.lang a[aria-current]{background:var(--gold);color:var(--ink)}
.cta{background:var(--paper);color:var(--ink);padding:.62rem 1.15rem;border-radius:99px;font-weight:600;font-size:.95rem;transition:background .2s}
.cta:hover{background:var(--gold)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--gold-soft);border-radius:50%;background:none;color:inherit;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .3s}
.burger span:first-child{top:17px}.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- Giriş (hero) ---------- */
.hero{position:relative;min-height:calc(100svh - 4.25rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:2rem;padding:calc(var(--bar-h) + 3rem) var(--pad) 4rem;overflow:hidden;
  background:radial-gradient(90% 80% at 78% 45%,var(--wine2) 0%,var(--wine) 32%,var(--ink) 78%)}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(2.75rem,6.4vw,6.9rem);line-height:1;margin-bottom:2rem;text-wrap:balance}
.hero h1>span{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1>span>span{display:inline-block}
.lead{max-width:34em;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;color:rgba(247,244,242,.84);margin-bottom:2.25rem}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.9rem 1.6rem;border-radius:99px;font-weight:600;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:var(--paper)}
.btn.ghost{border:1px solid rgba(247,244,242,.4)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.ghost-dark{border:1px solid rgba(35,5,9,.3);color:var(--ink)}
.btn.ghost-dark:hover{border-color:var(--wine);color:var(--wine)}

.rosette{position:relative;width:min(100%,78vh,44rem);aspect-ratio:1;justify-self:center;will-change:transform}
.rosette-lines{position:absolute;inset:0;width:100%;height:100%;stroke:var(--gold);stroke-width:1.6;stroke-linejoin:round}
.rosette-lines .ln-a,.rosette-lines .ln-e{stroke-width:1.2;opacity:.6}
.rosette-lines .ln-c{opacity:.55}
.rosette-lines .ln-d{opacity:.42}
.rosette-logo{position:absolute;left:50%;top:50%;width:45%;height:45%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px var(--gold-soft),0 30px 80px rgba(0,0,0,.45)}

/* Açılış: çizgiler kendini çizer, logo belirir, başlık yükselir — sayfadaki tek otomatik hareket */
.js .rosette-lines .ln,.js .rosette-lines .ln *{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s cubic-bezier(.6,.05,.25,1) forwards}
.js .rosette-lines .ln-b{animation-delay:.25s}
.js .rosette-lines .ln-c{animation-delay:.45s}
.js .rosette-lines .ln-d *{animation-delay:.7s;animation-duration:1.6s}
.js .rosette-lines .ln-e{animation-delay:.9s}
.js .rosette-lines .ln-f{animation-delay:.15s}
.js .rosette-logo{opacity:0;animation:logo 1.4s .5s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero h1>span>span{transform:translateY(105%);animation:rise 1.1s cubic-bezier(.2,.75,.15,1) forwards}
.js .hero h1 .ln1>span{animation-delay:.2s}
.js .hero h1 .ln2>span{animation-delay:.38s}
.js .lead,.js .actions{opacity:0;animation:fade .9s .9s ease forwards}
.js .actions{animation-delay:1.05s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes logo{from{opacity:0;transform:translate(-50%,-50%) scale(.86) rotate(-20deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* ---------- Kayan şerit (önceki sürümde altta kalıyordu; artık kendi bandında) ---------- */
.ribbon{position:relative;z-index:3;background:var(--gold);color:var(--ink);overflow:hidden;height:4.25rem;display:flex;align-items:center;border-block:1px solid rgba(35,5,9,.25)}
.ribbon-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.ribbon-set{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;font-family:var(--serif);font-size:1.6rem;line-height:1;white-space:nowrap}
.ribbon svg{width:.9rem;height:.9rem;fill:var(--wine);flex:none}
.ribbon:hover .ribbon-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Tanıtım cümlesi ---------- */
.statement{background:var(--paper);color:var(--ink);padding:clamp(5rem,16vh,10rem) var(--pad)}
.statement p{font-family:var(--serif);font-size:clamp(1.85rem,4.1vw,3.9rem);line-height:1.14;letter-spacing:-.01em;max-width:21em}
.statement .w{opacity:.16;transition:opacity .25s linear}
.statement .w.on{opacity:1}

/* ---------- Bölüm başlıkları ---------- */
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.5rem 3rem;align-items:end;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.sec-head h2{font-size:clamp(2.6rem,6vw,5.4rem)}
.sec-head p{max-width:26em;font-size:1.15rem;line-height:1.55}

/* ---------- Hizmetler ---------- */
.services{background:var(--paper);color:var(--ink);padding:0 var(--pad) clamp(5rem,14vh,9rem)}
.services .sec-head p{color:rgba(35,5,9,.72)}
.svc-list{border-top:1px solid rgba(35,5,9,.2)}
.svc-list li{display:grid;grid-template-columns:4.5rem minmax(0,1.1fr) minmax(0,1fr);gap:1rem 2.5rem;align-items:center;padding:clamp(1.6rem,3.5vh,2.4rem) 0;border-bottom:1px solid rgba(35,5,9,.2)}
.svc-list .glyph{width:3.6rem;height:3.6rem;color:var(--wine);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc-list li:hover .glyph{transform:rotate(45deg)}
.svc-list h3{font-size:clamp(1.7rem,3.2vw,2.75rem)}
.svc-list p{font-size:1.08rem;color:rgba(35,5,9,.78);max-width:30em}

/* ---------- Süreç ---------- */
.process{background:var(--stone);color:var(--ink);padding:clamp(5rem,14vh,9rem) var(--pad)}
.process h2{font-size:clamp(2.6rem,6vw,5.4rem);margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.5rem 2rem;position:relative}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;top:1.75rem;left:4.5rem;right:-2rem;height:1px;background:rgba(108,21,30,.35)}
.steps li:last-child::before{display:none}
.node{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;margin-bottom:1.5rem;color:var(--wine)}
.node svg{position:absolute;inset:0;fill:none;stroke:currentColor;stroke-width:1.6}
.node b{position:relative;font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1}
.steps h3{font-size:clamp(1.5rem,2.2vw,2rem);margin-bottom:.6rem}
.steps p{color:rgba(35,5,9,.76);max-width:22em}

/* ---------- Temsil edilen isimler ---------- */
.roster{background:var(--ink);padding:clamp(5rem,14vh,9rem) var(--pad)}
.roster .sec-head p{color:rgba(247,244,242,.72)}
.arches{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:2.5rem 1.75rem}
@media (max-width:1100px){.arches{grid-template-columns:repeat(3,minmax(0,1fr))}}
.arch{display:block}
.frame{position:relative;display:grid;place-items:center;aspect-ratio:3/4;overflow:hidden;border-radius:50% 50% .5rem .5rem/37.5% 37.5% .5rem .5rem;
  background:radial-gradient(70% 55% at 50% 30%,rgba(214,181,124,.16),transparent 70%),linear-gradient(170deg,var(--wine2),var(--wine) 45%,#3a0a10)}
.frame::after{content:"";position:absolute;inset:9px;border:1px solid var(--gold-soft);border-radius:50% 50% .3rem .3rem/37.5% 37.5% .3rem .3rem;pointer-events:none}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
a.arch:hover .frame img{transform:scale(1.05)}
.mono{font-family:var(--serif);font-size:clamp(2.6rem,5vw,3.6rem);color:var(--gold)}
.cap{display:block;padding:1rem .25rem 0}
.cap b{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2}
.cap span{color:rgba(247,244,242,.66);font-size:.98rem}
a.arch:hover .cap b{color:var(--gold)}

/* ---------- İletişim ---------- */
.contact{position:relative;overflow:hidden;background:var(--wine);padding:clamp(5rem,16vh,10rem) var(--pad) 2.5rem}
.contact-mark{position:absolute;right:-18vmin;top:-18vmin;width:min(70vmin,40rem);aspect-ratio:1;opacity:.22;pointer-events:none}
.contact-mark svg{width:100%;height:100%;stroke:var(--gold);stroke-width:2}
.contact h2{position:relative;font-size:clamp(3.75rem,13vw,12.5rem);color:var(--gold);line-height:.95}
.contact-text{position:relative;max-width:30em;font-size:clamp(1.1rem,1.6vw,1.3rem);margin:2rem 0 2.25rem;color:rgba(247,244,242,.88)}
.channels{position:relative;margin:clamp(3rem,8vh,5rem) 0 clamp(4rem,10vh,6rem);border-top:1px solid rgba(247,244,242,.25)}
.channels div{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr;gap:.25rem 2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid rgba(247,244,242,.25)}
.channels dt{color:rgba(247,244,242,.7);font-size:.98rem}
.channels dd{font-family:var(--serif);font-size:clamp(1.35rem,3vw,2.4rem);line-height:1.2;overflow-wrap:anywhere}
.channels a{transition:color .2s}
.channels a:hover{color:var(--gold)}
.foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;font-size:.9rem;color:rgba(247,244,242,.75)}
.foot b{font-weight:600;color:var(--paper)}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot-links a{text-decoration:underline;text-underline-offset:3px}
.foot-links a:hover{color:var(--gold)}

/* ---------- Yasal sayfa ---------- */
.legal{background:var(--paper);color:var(--ink);padding:calc(var(--bar-h) + 5rem) var(--pad) 6rem;min-height:70vh}
.legal h1{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:2rem}
.legal-body{max-width:44em;font-size:1.05rem;line-height:1.7;margin-bottom:2.5rem}

/* ---------- Duyarlı yerleşim ---------- */
@media (max-width:1080px){
  .links{gap:1.4rem}
  .tools .cta{display:none}
}
@media (max-width:900px){
  :root{--bar-h:4rem}
  .burger{display:block}
  .links{position:fixed;inset:0;z-index:-1;margin:0;flex-direction:column;justify-content:center;gap:.5rem;padding:6rem var(--pad) 3rem;background:var(--wine);font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:400;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
  .links a{padding:.2rem 0;color:var(--paper)}
  .links .menu-cta{display:inline-flex;align-self:flex-start;margin-top:1.5rem;font-family:var(--sans);font-size:1rem;font-weight:600;background:var(--gold);color:var(--ink);padding:.9rem 1.5rem;border-radius:99px}
  .menu-open .links{visibility:visible;opacity:1;transition:opacity .3s}
  .menu-open .bar{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .menu-open{overflow:hidden}
  .hero{grid-template-columns:1fr;align-items:end;min-height:calc(100svh - 4.25rem);padding-top:calc(var(--bar-h) + 2rem)}
  .rosette{position:absolute;width:min(118vw,40rem);right:-34%;top:2%;opacity:.4}
  .sec-head{grid-template-columns:1fr}
  .svc-list li{grid-template-columns:3.5rem 1fr;align-items:start}
  .svc-list .glyph{width:2.8rem;height:2.8rem;grid-row:span 2}
  .steps li::before{display:none}
  .steps{grid-template-columns:1fr;gap:0}
  .steps li{display:grid;grid-template-columns:3.5rem 1fr;column-gap:1.25rem;padding-bottom:2.25rem}
  .steps li::after{content:"";position:absolute;left:1.75rem;top:3.75rem;bottom:.25rem;width:1px;background:rgba(108,21,30,.35)}
  .steps li:last-child::after{display:none}
  .node{grid-row:span 2;margin:0}
  .channels div{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand span{display:none}
  .lang a{min-width:2.1rem;padding:.38rem .4rem}
  .actions .btn{flex:1 1 100%}
  .arches{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1rem}
  .cap b{font-size:1.15rem}
  .ribbon{height:3.6rem}
  .ribbon-set{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rosette-lines .ln,.js .rosette-lines .ln *,.js .rosette-logo,.js .hero h1>span>span,.js .lead,.js .actions{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
  .js .rosette-logo{transform:translate(-50%,-50%)}
  .ribbon-track{animation:none}
  .statement .w{opacity:1}
}