/* ========================================================================== TüliNail Beauty Club — Tema stilleri 1. Tokens 2. Temel 3. Butonlar 4. Header 5. Slider 6. Marquee 7. Bölümler 8. Kartlar 9. Neden Biz 10. Yorumlar 11. Galeri 12. Hizmet detay 13. İletişim 14. Footer 15. Mobil CTA 16. Yardımcılar ========================================================================== */ /* ============ 1. TOKENS ============ */ :root{ --rose-50:#fdf6f3; --rose-100:#fbe9e3; --rose-200:#f5ccc0; --rose-300:#eaa996; --rose-400:#d98b76; --rose-500:#c06b55; --rose-600:#9a4d3c; --blush:#f8d8cc; --cream:#fbf4ed; --ivory:#fffaf5; --ink:#241612; --ink-2:#3a2721; --ink-soft:#6b4e46; --ink-mute:#8c736a; --gold-200:#f2e2c4; --gold-300:#e5c99a; --gold-400:#cfa866; --gold-500:#b08842; --gold-600:#8a6a2f; --line:rgba(176,136,66,.16); --line-strong:rgba(176,136,66,.32); --shadow-xs:0 1px 2px rgba(80,40,30,.05); --shadow-sm:0 1px 2px rgba(80,40,30,.06), 0 2px 10px rgba(80,40,30,.04); --shadow-md:0 10px 30px rgba(150,80,60,.12), 0 2px 6px rgba(80,40,30,.06); --shadow-lg:0 30px 70px rgba(120,65,45,.18); --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --r-sm:12px; --r:18px; --r-lg:24px; --r-pill:999px; --wrap:1280px; --nav-h:84px; --ease:cubic-bezier(.2,.8,.2,1); } /* ============ 2. TEMEL ============ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--ink); background:var(--ivory); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{display:block; max-width:100%; height:auto} a{color:inherit; text-decoration:none} button{font-family:inherit} h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.01em; line-height:1.15} h1,h2{font-family:var(--serif)} h3,h4{font-family:var(--serif)} p{margin:0 0 1em} p:last-child{margin-bottom:0} :focus-visible{outline:2px solid var(--gold-500); outline-offset:3px; border-radius:4px} .wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px} @media (max-width:720px){.wrap{padding:0 20px}} .skip-link{position:absolute; left:-9999px; top:0; z-index:1000; background:var(--ink); color:var(--cream); padding:12px 20px; border-radius:0 0 var(--r-sm) 0} .skip-link:focus{left:0} .screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap} .section{padding:110px 0; position:relative} .section--tight{padding:76px 0} .section--cream{background:var(--cream)} .section--grad{background:linear-gradient(180deg,var(--ivory) 0%,var(--cream) 100%)} @media (max-width:900px){.section{padding:76px 0}.section--tight{padding:52px 0}} @media (max-width:560px){.section{padding:58px 0}.section--tight{padding:44px 0}} /* eyebrow */ .eyebrow{ display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-500); margin:0; } .eyebrow::before{content:""; display:inline-block; width:22px; height:1px; background:var(--gold-400); vertical-align:middle; margin-right:10px; margin-bottom:3px} .eyebrow--center::after{content:""; display:inline-block; width:22px; height:1px; background:var(--gold-400); vertical-align:middle; margin-left:10px; margin-bottom:3px} .section-head{text-align:center; margin-bottom:56px} .section-head h2{font-size:clamp(32px,4.6vw,56px); margin-top:14px; line-height:1.06} .section-head p{max-width:620px; margin:18px auto 0; color:var(--ink-soft); font-size:16px} .section-head--left{text-align:left} .section-head--left p{margin-left:0} @media (max-width:720px){.section-head{margin-bottom:36px}} .lead{font-size:17px; color:var(--ink-soft)} /* ============ 3. BUTONLAR ============ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border:1px solid transparent; border-radius:var(--r-pill); font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; cursor:pointer; transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s, color .28s, border-color .28s; background:transparent; line-height:1; text-align:center; } .btn .arr{transition:transform .3s var(--ease)} .btn:hover .arr{transform:translateX(4px)} .btn--primary{ background:linear-gradient(135deg,var(--rose-500) 0%,var(--rose-600) 62%,#7d3a2c 130%); color:#fff; box-shadow:0 12px 26px -12px rgba(154,77,60,.6), inset 0 1px 0 rgba(255,255,255,.18); } .btn--primary:hover{transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(192,107,85,.72), inset 0 1px 0 rgba(255,255,255,.35)} .btn--ghost{border-color:var(--ink); color:var(--ink)} .btn--ghost:hover{background:var(--ink); color:var(--ivory)} .btn--gold{border-color:var(--gold-400); color:var(--gold-600); background:rgba(255,255,255,.5)} .btn--gold:hover{background:var(--gold-400); color:#fff} .btn--light{border-color:rgba(255,255,255,.7); color:#fff} .btn--light:hover{background:#fff; color:var(--ink)} .btn--wa{background:#0e7c66; color:#fff; box-shadow:0 12px 26px -12px rgba(14,124,102,.55)} .btn--wa:hover{transform:translateY(-2px); background:#0a6555} .btn--sm{padding:11px 22px; font-size:11px} .btn--block{width:100%} /* ============ 4. HEADER ============ */ .header{ position:fixed; inset:0 0 auto 0; z-index:200; background:rgba(36,22,18,.72); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%); transition:background .35s, box-shadow .35s, padding .35s; padding:12px 0; } .header.is-scrolled{background:rgba(36,22,18,.95); box-shadow:0 1px 0 rgba(207,168,102,.18), 0 8px 28px rgba(0,0,0,.22); padding:8px 0} .header__inner{display:flex; align-items:center; justify-content:space-between; gap:20px} .brand{display:flex; align-items:center; gap:12px; flex-shrink:0} .brand__logo{height:62px; width:auto; transition:height .35s var(--ease); filter:drop-shadow(0 2px 10px rgba(207,168,102,.28))} .header.is-scrolled .brand__logo{height:50px} .brand__text{display:none} @media (max-width:640px){.brand__logo{height:50px}.header.is-scrolled .brand__logo{height:44px}} .nav__list{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0} .nav__list > li{position:relative} .nav__list a{ display:inline-block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream); opacity:.84; transition:opacity .2s, color .2s; position:relative; padding:6px 0; } .nav__list a:hover,.nav__list .current-menu-item > a,.nav__list .current-menu-parent > a,.nav__list .is-active > a{opacity:1; color:var(--gold-300)} .nav__list > li > a::after{content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; background:var(--gold-400); transition:width .3s var(--ease); transform:translateX(-50%)} .nav__list > li > a:hover::after,.nav__list > li.current-menu-item > a::after{width:100%} .nav__toggle-sub{display:none} .sub-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:262px; background:rgba(28,17,13,.98); backdrop-filter:blur(14px); border:1px solid rgba(207,168,102,.22); border-radius:var(--r); padding:10px; box-shadow:var(--shadow-md); list-style:none; margin:0; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav__list li:hover > .sub-menu,.nav__list li:focus-within > .sub-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)} .sub-menu a{display:block; padding:10px 14px; border-radius:10px; font-size:11px; letter-spacing:.12em; white-space:nowrap; width:100%} .sub-menu a::after{display:none} .sub-menu a:hover{background:rgba(207,168,102,.14); color:var(--gold-300)} .header__actions{display:flex; align-items:center; gap:14px} /* dil değiştirici */ .langs{display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0} .langs a,.langs span{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cream); opacity:.6; padding:5px 8px; border-radius:8px; transition:.2s; line-height:1; } .langs a:hover{opacity:1; background:rgba(207,168,102,.16); color:var(--gold-300)} .langs .is-current > span,.langs .is-current > a{opacity:1; color:var(--gold-300); background:rgba(207,168,102,.14)} .langs li + li{border-left:1px solid rgba(251,244,237,.2); padding-left:6px} .nav__cta{padding:11px 22px; font-size:11px} .burger{ display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; padding:0; } .burger span{width:22px; height:1.6px; background:var(--cream); transition:transform .3s var(--ease), opacity .3s; display:block} .burger.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} @media (max-width:1180px){.nav__list{gap:20px}.nav__list a{font-size:10.5px; letter-spacing:.14em}} @media (max-width:1024px){ .nav,.nav__cta{display:none} .burger{display:flex} } /* mobil menü */ .mobile-nav{ position:fixed; inset:0; z-index:190; background:linear-gradient(180deg,#241612 0%,#160d0a 100%); padding:calc(var(--nav-h) + 20px) 24px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; } .mobile-nav.is-open{opacity:1; visibility:visible} .mobile-nav ul{list-style:none; margin:0; padding:0} .mobile-nav > ul > li{border-bottom:1px solid rgba(207,168,102,.14)} .mobile-nav a{display:block; font-family:var(--serif); font-size:21px; color:var(--cream); padding:14px 0} .mobile-nav a:hover{color:var(--gold-300)} .mobile-nav .sub-menu{ position:static; transform:none; opacity:1; visibility:visible; background:transparent; border:0; box-shadow:none; padding:0 0 10px 14px; min-width:0; display:none; } .mobile-nav li.is-open > .sub-menu{display:flex} .mobile-nav .sub-menu a{font-size:15px; font-family:var(--sans); opacity:.8; padding:9px 0; letter-spacing:.02em; text-transform:none} .mobile-nav__head{display:flex; align-items:center; justify-content:space-between; gap:10px} .mobile-nav__head > a{flex:1} .mobile-nav__sub-toggle{ background:transparent; border:1px solid rgba(207,168,102,.3); color:var(--gold-300); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:12px; flex-shrink:0; display:grid; place-items:center; transition:transform .25s } .mobile-nav li.is-open > .mobile-nav__head .mobile-nav__sub-toggle{transform:rotate(180deg)} .mobile-nav__footer{margin-top:28px; display:flex; flex-direction:column; gap:12px} .mobile-nav__langs{display:flex; gap:10px; justify-content:center; margin-top:22px; list-style:none; padding:0} .mobile-nav__langs a,.mobile-nav__langs span{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); opacity:.7; padding:8px 14px; border:1px solid rgba(207,168,102,.3); border-radius:var(--r-pill); display:inline-block} .mobile-nav__langs .is-current span{opacity:1; color:var(--gold-300); border-color:var(--gold-500)} body.is-locked{overflow:hidden} /* ============ 5. HERO SLIDER ============ */ .hero{position:relative; background:var(--ink)} .slider{position:relative; overflow:hidden} .slider__viewport{position:relative; width:100%; height:min(88vh,820px); min-height:520px} @media (max-width:1024px){.slider__viewport{height:min(80vh,720px); min-height:480px}} @media (max-width:640px){.slider__viewport{height:min(88vh,680px); min-height:460px}} .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s var(--ease), visibility .9s; } .slide.is-active{opacity:1; visibility:visible; z-index:2} .slide__media{position:absolute; inset:0; overflow:hidden} .slide__media img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; transform:scale(1.06); transition:transform 7s linear; } .slide.is-active .slide__media img{transform:scale(1)} .slide__media picture{display:block; width:100%; height:100%} .slide__overlay{ position:absolute; inset:0; background: linear-gradient(90deg,rgba(24,13,10,.82) 0%,rgba(24,13,10,.58) 42%,rgba(24,13,10,.24) 72%,rgba(24,13,10,.42) 100%), linear-gradient(180deg,rgba(24,13,10,.55) 0%,transparent 32%,rgba(24,13,10,.5) 100%); } @media (max-width:768px){ .slide__overlay{background:linear-gradient(180deg,rgba(24,13,10,.62) 0%,rgba(24,13,10,.42) 40%,rgba(24,13,10,.86) 100%)} .slide__media img{object-position:center 28%} } .slide__inner{ position:relative; z-index:3; height:100%; display:flex; align-items:center; } .slide__content{max-width:660px; color:#fff; padding:calc(var(--nav-h) + 20px) 0 60px} @media (max-width:768px){.slide__content{max-width:100%; padding:calc(var(--nav-h) + 16px) 0 96px; text-align:center}} .slide__eyebrow{color:var(--gold-300); margin-bottom:16px} .slide__eyebrow::before{background:var(--gold-300)} @media (max-width:768px){.slide__eyebrow::after{content:""; display:inline-block; width:22px; height:1px; background:var(--gold-300); vertical-align:middle; margin-left:10px; margin-bottom:3px}} /* Not: ilk slayt

, diğerleri

(sayfada tek H1 olsun diye). Görünüm hepsinde aynı olsun diye font burada açıkça tanımlanır. */ .slide__title, h1.slide__title, p.slide__title{ font-family:var(--serif); font-weight:500; font-style:normal; letter-spacing:-.01em; font-size:clamp(34px,5.4vw,66px); line-height:1.04; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); margin:0 0 18px; } .slide__title em{font-style:italic; color:var(--gold-300)} .slide__text{ font-size:clamp(15px,1.35vw,18px); line-height:1.7; color:rgba(255,255,255,.9); max-width:520px; margin:0 0 30px; text-shadow:0 1px 12px rgba(0,0,0,.35); } @media (max-width:768px){.slide__text{margin-left:auto; margin-right:auto; font-size:15px}} .slide__ctas{display:flex; gap:12px; flex-wrap:wrap} @media (max-width:768px){.slide__ctas{justify-content:center}} /* slider kontroller */ .slider__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(24,13,10,.28); backdrop-filter:blur(6px); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:15px; transition:background .25s, border-color .25s, transform .25s var(--ease); } .slider__arrow:hover{background:var(--rose-500); border-color:var(--rose-500); transform:translateY(-50%) scale(1.06)} .slider__arrow--prev{left:26px} .slider__arrow--next{right:26px} @media (max-width:900px){.slider__arrow{width:42px; height:42px; font-size:13px}.slider__arrow--prev{left:12px}.slider__arrow--next{right:12px}} @media (max-width:640px){.slider__arrow{display:none}} .slider__dots{ position:absolute; left:0; right:0; bottom:28px; z-index:6; display:flex; justify-content:center; align-items:center; gap:10px; } @media (max-width:768px){.slider__dots{bottom:24px}} .slider__dot{ width:34px; height:3px; border-radius:2px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.35); transition:background .3s, width .3s var(--ease); position:relative; overflow:hidden; } .slider__dot.is-active{background:rgba(255,255,255,.55); width:56px} .slider__dot.is-active::after{ content:""; position:absolute; inset:0; background:var(--gold-300); transform-origin:left; animation:dotFill var(--slider-duration,6500ms) linear forwards; } .slider.is-paused .slider__dot.is-active::after{animation-play-state:paused} @keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ .slider__dot.is-active::after{animation:none; transform:scaleX(1)} .slide__media img{transition:none; transform:none} .slide{transition:opacity .01s} } .slider__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:64px; z-index:6; color:rgba(255,255,255,.65); font-size:10px; letter-spacing:.24em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; } .slider__scroll::after{content:""; width:1px; height:34px; background:linear-gradient(180deg,var(--gold-300),transparent); animation:scrollHint 2.2s ease-in-out infinite} @keyframes scrollHint{0%,100%{opacity:.3; transform:scaleY(.6)}50%{opacity:1; transform:scaleY(1)}} @media (max-width:900px){.slider__scroll{display:none}} /* ============ 6. MARQUEE ============ */ .marquee{ background:var(--ink); color:var(--cream); padding:18px 0; overflow:hidden; border-top:1px solid rgba(207,168,102,.28); border-bottom:1px solid rgba(207,168,102,.28); } .marquee__track{ display:flex; width:max-content; gap:0; animation:marquee 42s linear infinite; white-space:nowrap; font-family:var(--serif); font-size:21px; letter-spacing:.06em; } .marquee:hover .marquee__track{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.marquee__track{animation:none}} .marquee__group{display:flex; align-items:center; gap:0} .marquee__item{padding:0 30px} .marquee__sep{color:var(--gold-400); font-size:.8em} @media (max-width:720px){.marquee__track{font-size:17px}.marquee__item{padding:0 20px}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ 7. SAYFA BAŞLIĞI ============ */ .page-hero{ position:relative; padding:calc(var(--nav-h) + 78px) 0 62px; text-align:center; background:linear-gradient(180deg,var(--rose-50) 0%,var(--ivory) 100%); border-bottom:1px solid var(--line); overflow:hidden; } .page-hero--photo{border-bottom:0} .page-hero__bg{position:absolute; inset:0; z-index:0} .page-hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 35%} .page-hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,13,10,.72) 0%,rgba(24,13,10,.55) 55%,rgba(24,13,10,.75) 100%)} .page-hero--photo{padding:calc(var(--nav-h) + 96px) 0 84px} .page-hero--photo .page-hero__inner{color:#fff} .page-hero--photo h1{color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.35)} .page-hero--photo .page-hero__lead{color:rgba(255,255,255,.9)} .page-hero--photo .eyebrow{color:var(--gold-300)} .page-hero--photo .eyebrow::before,.page-hero--photo .eyebrow--center::after{background:var(--gold-300)} .page-hero__inner{position:relative; z-index:2} .page-hero h1{font-size:clamp(32px,4.8vw,58px); margin:14px 0 0; line-height:1.06} .page-hero__lead{max-width:660px; margin:18px auto 0; color:var(--ink-soft); font-size:16.5px} @media (max-width:720px){.page-hero{padding:calc(var(--nav-h) + 46px) 0 42px}.page-hero--photo{padding:calc(var(--nav-h) + 62px) 0 58px}} /* breadcrumb */ .crumbs{font-size:12px; color:var(--ink-mute); letter-spacing:.04em; margin-bottom:6px} .crumbs a:hover{color:var(--rose-500)} .crumbs span[aria-current]{color:var(--ink-soft)} .page-hero--photo .crumbs{color:rgba(255,255,255,.7)} .page-hero--photo .crumbs a:hover{color:var(--gold-300)} /* ============ 8. HİZMET KARTLARI ============ */ .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px} @media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr); gap:22px}} @media (max-width:620px){.cards{grid-template-columns:1fr}} .card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .38s var(--ease), box-shadow .38s var(--ease), border-color .3s; height:100%; } .card:hover{transform:translateY(-7px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)} .card__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--rose-100)} .card__media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)} .card:hover .card__media img{transform:scale(1.06)} .card__badge{ position:absolute; left:16px; top:16px; z-index:2; background:rgba(255,255,255,.92); color:var(--rose-600); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:7px 13px; border-radius:var(--r-pill); } .card__body{padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px; flex:1} .card__body h3{font-size:24px; line-height:1.2} .card__body p{color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin:0; flex:1} .card__link{margin-top:8px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-500); display:inline-flex; align-items:center; gap:8px} .card:hover .card__link{color:var(--gold-600)} .card:hover .card__link .arr{transform:translateX(4px)} .card__link .arr{transition:transform .3s var(--ease)} @media (max-width:620px){.card__body{padding:22px 20px}.card__body h3{font-size:21px}} /* ============ 9. NEDEN BİZ ============ */ .why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} @media (max-width:940px){.why__grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.why__grid{grid-template-columns:1fr}} .why__item{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; position:relative; } .why__item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong)} .why__num{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--gold-500); display:block; margin-bottom:14px; letter-spacing:.1em; } .why__item h3{font-size:21px; margin-bottom:10px} .why__item p{color:var(--ink-soft); font-size:14.5px; line-height:1.75; margin:0} /* ============ 10. YORUMLAR ============ */ .reviews{position:relative} .reviews__carousel{position:relative; max-width:900px; margin:0 auto; display:flex; align-items:center; gap:16px} .reviews__viewport{flex:1; overflow:hidden; border-radius:var(--r-lg)} .reviews__track{display:flex; transition:transform .55s var(--ease)} .reviews__item{min-width:100%; padding:2px} .review-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:38px 40px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; min-height:262px; height:100%; } @media (max-width:720px){.review-card{padding:26px 22px; min-height:238px}} .review-card__stars{color:var(--gold-500); font-size:16px; letter-spacing:2px; line-height:1} .review-card__text{margin:0; color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.6; flex:1} @media (max-width:720px){.review-card__text{font-size:16.5px}} .review-card__meta{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-mute); font-family:var(--sans); margin-top:auto; flex-wrap:wrap} .review-card__author{font-weight:600; color:var(--ink-soft)} .review-card__badge{background:var(--rose-500); color:#fff; font-size:10px; padding:3px 10px; border-radius:var(--r-pill); letter-spacing:.08em; text-transform:uppercase; font-weight:600} .reviews__nav{ flex-shrink:0; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:13px; transition:background .25s, color .25s, border-color .25s, transform .25s var(--ease); } .reviews__nav:hover{background:var(--rose-500); border-color:var(--rose-500); color:#fff; transform:scale(1.06)} @media (max-width:600px){.reviews__carousel{gap:6px}.reviews__nav{width:36px; height:36px; font-size:11px}} .reviews__dots{display:flex; justify-content:center; gap:8px; margin-top:26px} .reviews__dot{width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(154,77,60,.24); cursor:pointer; transition:.25s} .reviews__dot.is-active{background:var(--rose-500); transform:scale(1.3)} .reviews__cta{text-align:center; margin-top:34px} .reviews__rating{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; font-size:14px; color:var(--ink-soft)} .reviews__rating b{font-family:var(--serif); font-size:24px; color:var(--ink); font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1} /* ============ 11. GALERİ ============ */ .gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px} @media (max-width:1000px){.gallery-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr); gap:12px}} .gallery-item{ position:relative; display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; background:var(--rose-100); cursor:zoom-in; border:1px solid var(--line); } .gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease)} .gallery-item:hover img{transform:scale(1.05)} .gallery-item__cap{ position:absolute; inset:auto 0 0 0; padding:26px 18px 16px; color:#fff; background:linear-gradient(180deg,transparent,rgba(24,13,10,.8)); font-size:13px; letter-spacing:.02em; opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s var(--ease); } .gallery-item:hover .gallery-item__cap,.gallery-item:focus-visible .gallery-item__cap{opacity:1; transform:translateY(0)} @media (hover:none){.gallery-item__cap{opacity:1; transform:none}} /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:400; background:rgba(18,10,8,.94); display:flex; align-items:center; justify-content:center; padding:40px 20px; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; } .lightbox.is-open{opacity:1; visibility:visible} .lightbox img{max-width:min(94vw,1100px); max-height:86vh; width:auto; height:auto; border-radius:var(--r-sm); box-shadow:var(--shadow-lg)} .lightbox__cap{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:rgba(255,255,255,.82); font-size:14px; padding:0 20px} .lightbox__close,.lightbox__nav{ position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.28); color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:16px; transition:background .2s, transform .2s; } .lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24); transform:scale(1.06)} .lightbox__close{top:22px; right:22px} .lightbox__nav--prev{left:22px; top:50%; transform:translateY(-50%)} .lightbox__nav--next{right:22px; top:50%; transform:translateY(-50%)} .lightbox__nav--prev:hover{transform:translateY(-50%) scale(1.06)} .lightbox__nav--next:hover{transform:translateY(-50%) scale(1.06)} @media (max-width:600px){.lightbox__nav{width:38px; height:38px}.lightbox__nav--prev{left:8px}.lightbox__nav--next{right:8px}} /* ============ 12. HİZMET DETAY ============ */ .svc-intro{max-width:860px; margin:0 auto} .svc-intro h2,.svc-intro h3{margin:26px 0 12px} .svc-intro h3{font-size:23px; color:var(--ink)} .svc-intro p{color:var(--ink-soft); font-size:16.5px; line-height:1.8; margin:0 0 16px} .svc-intro ul{color:var(--ink-soft); font-size:16px; line-height:1.8; padding-left:20px; margin:0 0 16px} .svc-intro li{margin-bottom:6px} .svc-intro__highlight{ background:linear-gradient(135deg,var(--rose-50),var(--cream)); border-left:3px solid var(--gold-400); padding:20px 24px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--serif); font-size:20px!important; color:var(--ink)!important; line-height:1.5!important; margin:26px 0!important; } .svc-intro__actions{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap} .svc-hero-media{border-radius:var(--r-lg); overflow:hidden; margin-bottom:0; box-shadow:var(--shadow-md); aspect-ratio:16/9} .svc-hero-media img{width:100%; height:100%; object-fit:cover} .item-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px} @media (max-width:1000px){.item-cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.item-cards{grid-template-columns:1fr}} .item-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s; } .item-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)} .item-card__media{aspect-ratio:4/3; overflow:hidden; background:var(--rose-100)} .item-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)} .item-card:hover .item-card__media img{transform:scale(1.05)} .item-card__body{padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px; flex:1} .item-card__body h3{font-size:21px} .item-card__body p{color:var(--ink-soft); font-size:14.5px; line-height:1.72; margin:0} .item-card__benefits-title{font-size:13px!important; font-weight:700; color:var(--ink)!important; margin-top:6px!important; letter-spacing:.02em} .item-card__benefits{margin:0; padding-left:18px; color:var(--ink-soft); font-size:13.5px; line-height:1.7} .item-card__benefits li{margin-bottom:5px} .item-card__foot{margin-top:auto; padding-top:14px; display:flex; justify-content:flex-end} .item-card__book{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--rose-500)} .item-card__book:hover{color:var(--gold-600)} /* SSS */ .faq-list{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px} .faq-item{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:2px 24px; transition:box-shadow .25s, border-color .25s} .faq-item[open]{box-shadow:var(--shadow-md); border-color:rgba(192,107,85,.24)} .faq-item summary{ list-style:none; cursor:pointer; padding:20px 34px 20px 0; position:relative; font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); line-height:1.4; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{ content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:var(--sans); font-size:22px; color:var(--gold-500); font-weight:300; transition:transform .25s; } .faq-item[open] summary::after{content:"−"; transform:translateY(-50%) rotate(180deg)} .faq-item__body{padding:0 0 22px; color:var(--ink-soft); font-size:15.5px; line-height:1.8} .faq-item__body p:last-child{margin-bottom:0} @media (max-width:600px){.faq-item{padding:2px 18px}.faq-item summary{font-size:17px; padding:17px 30px 17px 0}} /* çapraz linkler */ .xlinks{display:grid; grid-template-columns:repeat(3,1fr); gap:14px} @media (max-width:900px){.xlinks{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.xlinks{grid-template-columns:1fr}} .xlink{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 22px; transition:.28s var(--ease); font-family:var(--serif); font-size:17px; } .xlink:hover{border-color:var(--rose-400); transform:translateX(4px); box-shadow:var(--shadow-sm); color:var(--rose-600)} .xlink .arr{color:var(--gold-500)} /* ============ 13. HAKKIMIZDA / İÇERİK ============ */ .about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center} @media (max-width:940px){.about-grid{grid-template-columns:1fr; gap:40px}} .about-media{display:grid; grid-template-columns:1fr 1fr; gap:16px} .about-media img{border-radius:var(--r); box-shadow:var(--shadow-md); width:100%; height:100%; object-fit:cover; aspect-ratio:3/4} .about-media > *:first-child{margin-top:34px} @media (max-width:520px){.about-media > *:first-child{margin-top:0}} .prose{color:var(--ink-soft); font-size:16.5px; line-height:1.85} .prose h2{color:var(--ink); font-size:clamp(28px,3.6vw,42px); margin:0 0 22px} .prose h3{color:var(--ink); font-size:23px; margin:28px 0 12px} .prose p{margin:0 0 16px} .prose b,.prose strong{color:var(--ink); font-weight:600} .prose ul,.prose ol{padding-left:20px; margin:0 0 16px} .prose li{margin-bottom:7px} .prose a{color:var(--rose-500); text-decoration:underline; text-underline-offset:3px} .prose a:hover{color:var(--gold-600)} .prose img{border-radius:var(--r); margin:20px 0} .prose blockquote{ margin:24px 0; padding:20px 24px; border-left:3px solid var(--gold-400); background:var(--cream); border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:var(--serif); font-size:20px; color:var(--ink); } /* istatistik şeridi */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px} @media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{text-align:center; padding:26px 16px; background:#fff; border:1px solid var(--line); border-radius:var(--r)} .stat b{display:block; font-family:var(--serif); font-size:38px; color:var(--rose-500); line-height:1; font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1} .stat span{display:block; margin-top:8px; font-size:13px; color:var(--ink-soft); letter-spacing:.04em} /* ============ 14. İLETİŞİM ============ */ .contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:start} @media (max-width:940px){.contact-grid{grid-template-columns:1fr; gap:26px}} .contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-sm)} @media (max-width:560px){.contact-card{padding:24px}} .contact-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)} .contact-row:first-child{padding-top:0} .contact-row:last-child{border-bottom:0; padding-bottom:0} .contact-row .contact-row__icon, .contact-row__icon{ width:44px; height:44px; border-radius:14px; flex-shrink:0; background:linear-gradient(135deg,var(--blush),var(--rose-200)); color:var(--rose-600); display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1; text-align:center; overflow:hidden; margin:0; } .contact-row__icon i, .contact-row__icon svg{display:block; line-height:1; font-size:inherit; width:auto; height:auto; margin:0} .contact-row small{display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-600); font-weight:600; margin-bottom:5px} .contact-row b{ display:block; font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); line-height:1.35; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; } .contact-row span:not(.contact-row__icon){display:block; font-size:13.5px; color:var(--ink-soft); margin-top:3px} .contact-row a:hover{color:var(--rose-500)} .contact-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px} .map-embed{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--cream)} .map-embed iframe{display:block; width:100%; height:100%; min-height:460px; border:0} @media (max-width:940px){.map-embed iframe{min-height:340px}} /* randevu formu */ .booking{background:linear-gradient(180deg,var(--ivory) 0%,var(--cream) 100%)} .booking__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:start} @media (max-width:940px){.booking__grid{grid-template-columns:1fr; gap:32px}} .booking__intro h2{font-size:clamp(28px,3.8vw,44px); margin:14px 0 18px} .booking__intro p{color:var(--ink-soft); max-width:460px} .booking__contacts{display:flex; flex-direction:column; gap:10px; margin-top:26px} .booking__contacts a{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); font-weight:500} .booking__contacts a:hover{color:var(--rose-500)} .booking__contacts i{color:var(--gold-500); width:18px; text-align:center} .form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:16px; } @media (max-width:560px){.form{padding:24px 20px}} .form label{display:block; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px} .form .field + .field{margin-top:2px} .form input,.form select,.form textarea{ width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); padding:14px 16px; border:1px solid rgba(176,136,66,.28); border-radius:var(--r-sm); background:var(--ivory); transition:border-color .2s, box-shadow .2s; } .form input:focus,.form select:focus,.form textarea:focus{ outline:0; border-color:var(--rose-400); box-shadow:0 0 0 3px rgba(217,139,118,.16); } .form textarea{resize:vertical; min-height:96px} .form__row{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media (max-width:480px){.form__row{grid-template-columns:1fr}} .form__note{font-size:12.5px; color:var(--ink-mute); line-height:1.6; margin:0} .form__msg{font-size:14px; padding:12px 16px; border-radius:var(--r-sm); margin:0} .form__msg--ok{background:rgba(37,211,102,.1); color:#12813d; border:1px solid rgba(37,211,102,.3)} .form__msg--err{background:rgba(192,107,85,.1); color:var(--rose-600); border:1px solid rgba(192,107,85,.3)} .form .hp{position:absolute; left:-9999px} /* CTA şeridi */ .cta-band{ position:relative; padding:88px 0; text-align:center; color:#fff; overflow:hidden; background:var(--ink); } .cta-band__bg{position:absolute; inset:0} .cta-band__bg img{width:100%; height:100%; object-fit:cover; object-position:center 35%} .cta-band__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,13,10,.82),rgba(24,13,10,.9))} .cta-band__inner{position:relative; z-index:2} .cta-band h2{font-size:clamp(28px,4vw,48px); color:#fff; margin:14px 0 16px} .cta-band p{color:rgba(255,255,255,.82); max-width:560px; margin:0 auto 30px} .cta-band .eyebrow{color:var(--gold-300)} .cta-band .eyebrow::before,.cta-band .eyebrow--center::after{background:var(--gold-300)} .cta-band__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap} @media (max-width:720px){.cta-band{padding:62px 0}} /* ============ 15. FOOTER ============ */ .footer{background:var(--ink); color:rgba(251,244,237,.76); padding:72px 0 22px; border-top:1px solid rgba(207,168,102,.22)} .footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:44px; margin-bottom:46px} @media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr; gap:34px}} @media (max-width:560px){.footer__grid{grid-template-columns:1fr; gap:30px}} .footer__logo{height:104px; width:auto; filter:drop-shadow(0 4px 18px rgba(207,168,102,.3))} .footer p{font-size:14px; line-height:1.75; color:rgba(251,244,237,.72)} .footer h4{font-family:var(--serif); font-weight:500; color:var(--cream); font-size:17px; margin:0 0 18px} .footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14px} .footer a{color:rgba(251,244,237,.76); transition:color .2s} .footer a:hover{color:var(--gold-300)} .footer__social{display:flex; gap:11px; margin-top:22px} .footer__social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(207,168,102,.38); display:grid; place-items:center; font-size:16px; color:var(--cream); transition:background .22s, color .22s, border-color .22s, transform .22s; } .footer__social a:hover{background:var(--gold-500); border-color:var(--gold-500); color:var(--ink); transform:translateY(-2px)} .footer__bottom{ padding-top:22px; border-top:1px solid rgba(207,168,102,.18); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; color:rgba(251,244,237,.55); } .footer__bottom a:hover{color:var(--gold-300)} .footer__credit{color:rgba(251,244,237,.55)} .footer__credit a{color:rgba(251,244,237,.75); font-weight:600; letter-spacing:.02em; border-bottom:1px solid rgba(207,168,102,.35); padding-bottom:1px} .footer__credit a:hover{color:var(--gold-300); border-bottom-color:var(--gold-300)} @media (max-width:700px){.footer__bottom{justify-content:center; text-align:center; flex-direction:column; gap:10px}} .footer ul.footer__legal, .footer__legal{display:flex; flex-direction:row; gap:18px; flex-wrap:wrap; align-items:center; font-size:12.5px} .footer__bottom .footer__legal li{margin:0} /* ============ 16. MOBİL CTA ============ */ .mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; gap:1px; background:rgba(207,168,102,.25); box-shadow:0 -6px 24px rgba(36,22,18,.16); padding-bottom:env(safe-area-inset-bottom); } .mobile-cta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--cream); } .mobile-cta a.is-wa{background:#0e7c66; color:#fff} .mobile-cta a.is-primary{background:linear-gradient(135deg,var(--rose-500),var(--rose-600)); color:#fff} @media (max-width:768px){ .mobile-cta{display:flex} body{padding-bottom:56px} .footer{padding-bottom:34px} } /* whatsapp yüzen buton (desktop) */ .wa-float{ position:fixed; right:24px; bottom:24px; z-index:150; width:56px; height:56px; border-radius:50%; background:#0e7c66; color:#fff; display:grid; place-items:center; font-size:26px; box-shadow:0 10px 30px rgba(14,124,102,.42); transition:transform .25s var(--ease); } .wa-float:hover{transform:scale(1.08)} @media (max-width:768px){.wa-float{display:none}} /* ============ 17. YARDIMCILAR / ANİMASYON ============ */ .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)} .reveal.is-in{opacity:1; transform:none} .reveal--d1{transition-delay:.08s} .reveal--d2{transition-delay:.16s} .reveal--d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}} .text-center{text-align:center} .mt-0{margin-top:0}.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:48px} .divider{width:60px; height:1px; background:var(--gold-400); margin:0 auto} /* 404 & arama */ .err-page{padding:calc(var(--nav-h) + 100px) 0 100px; text-align:center} .err-page h1{font-size:clamp(64px,12vw,140px); color:var(--rose-200); line-height:1} .err-page h2{font-size:clamp(24px,3.4vw,36px); margin:8px 0 16px} .err-page p{color:var(--ink-soft); max-width:480px; margin:0 auto 28px} .search-form{display:flex; gap:8px; max-width:420px; margin:0 auto} .search-form input{flex:1; padding:13px 16px; border:1px solid var(--line-strong); border-radius:var(--r-pill); font-family:var(--sans); background:#fff} .search-form button{padding:13px 24px; border-radius:var(--r-pill); border:0; background:var(--ink); color:var(--cream); cursor:pointer; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600} /* yazı listesi */ .post-list{display:grid; grid-template-columns:repeat(3,1fr); gap:28px} @media (max-width:1000px){.post-list{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.post-list{grid-template-columns:1fr}} .pagination{display:flex; justify-content:center; gap:8px; margin-top:48px; flex-wrap:wrap} .pagination .page-numbers{ display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; font-size:14px; } .pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--rose-500); border-color:var(--rose-500); color:#fff} /* görsel yer tutucu */ .tn-ph{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--rose-100) 0%,var(--rose-200) 55%,var(--gold-200) 100%)} .card__media .tn-ph,.item-card__media .tn-ph{position:absolute;inset:0} /* ============ 18. İÇERİK İÇİNDEKİ BUTONLAR ============ .prose a kuralı buton renklerini ezmesin (hizmet detay, hakkımızda vb.). */ .prose a.btn, .prose .btn{ text-decoration:none; border-bottom:0; } .prose a.btn--primary, .prose a.btn--wa, .prose a.btn--light{color:#fff} .prose a.btn--light:hover{color:var(--ink)} .prose a.btn--ghost{color:var(--ink)} .prose a.btn--ghost:hover{color:var(--ivory)} .prose a.btn--gold{color:var(--gold-600)} .prose a.btn--gold:hover{color:#fff} .prose a.btn:hover{text-decoration:none} /* Buton içindeki ikon ve ok da metinle aynı renkte kalsın */ .btn i,.btn .arr{color:currentColor}