/* ============================================================ Efe Saygılı — Dijital İçerikler | Site Tasarımı (Claude-tarzı açık/minimalist) ============================================================ */ /* Dil çevirisi bitene kadar gövdeyi gizle — TR→EN açılış titremesini önler. 'deki inline script .i18n-pending ekler; i18n.js çeviri bitince kaldırır (1.5sn failsafe). */ html.i18n-pending body{visibility:hidden} :root{ /* Claude-tarzı sıcak, açık, minimalist palet (Anthropic marka token'ları) */ --bg:#F5F8FA; --bg-soft:#E9F0F4; --card:#FFFFFF; --card-2:#F1F5F8; --line:#E1E8EE; --line-2:#CBD9E1; --ink:#14202A; --soft:#46586A; --muted:#6B7C8A; --accent:#1F6F94; --accent-2:#6BA8C9; --accent-ink:#FFFFFF; --accent-h:#195A79; --signature:#1F6F94; --signature-ink:#FFFFFF; --maxw:1180px; --r:14px; --shadow:0 16px 40px -24px rgba(18,38,52,.22); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.62; font-size:16px; -webkit-font-smoothing:antialiased; } a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;} .serif{font-family:'Fraunces',Georgia,serif;} section{position:relative;} .eyebrow{font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);} h1,h2,h3{line-height:1.12; letter-spacing:-.02em; margin:0;} .h-sec{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:34px; margin:10px 0 6px;} .sub{color:var(--soft); font-size:17px; max-width:620px;} /* ---------- Buttons ---------- */ .btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; padding:13px 22px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .2s, border-color .2s; white-space:nowrap;} .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 1px 2px rgba(18,38,52,.06), 0 8px 20px -14px rgba(18,38,52,.4);} .btn-primary:hover{background:var(--accent-h); box-shadow:0 1px 2px rgba(18,38,52,.08), 0 12px 26px -14px rgba(18,38,52,.5);} .btn-gold{background:var(--signature); color:var(--signature-ink); box-shadow:0 1px 2px rgba(18,38,52,.06), 0 8px 20px -14px rgba(18,38,52,.4);} .btn-gold:hover{filter:brightness(1.04); box-shadow:0 1px 2px rgba(18,38,52,.08), 0 12px 26px -14px rgba(18,38,52,.5);} .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2);} .btn-ghost:hover{border-color:var(--signature); color:var(--signature);} .btn-block{width:100%; justify-content:center;} .btn[disabled],.btn.soon{background:var(--card-2); color:var(--muted); border-color:var(--line); cursor:not-allowed; pointer-events:none;} /* ---------- Header ---------- */ header.nav{position:sticky; top:0; z-index:50; background:rgba(244,248,250,.82); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line);} .nav-in{display:flex; align-items:center; justify-content:space-between; height:66px;} .brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.01em; font-size:18px;} .brand .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-h)); display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:600; color:#fff; font-size:18px;} .brand small{display:block; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);} .menu{display:flex; align-items:center; gap:28px;} .menu a{font-size:14.5px; color:var(--soft); font-weight:500;} .menu a:hover,.menu a.active{color:var(--ink);} .nav-cta{display:flex; align-items:center; gap:14px;} .burger{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:4px;} .burger svg{width:24px; height:24px; display:block;} /* ---------- Hero ---------- */ .hero{padding:74px 0 60px; overflow:hidden;} .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;} .hero h1{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:54px; letter-spacing:-.025em;} .hero h1 .hl{color:var(--ink);} .hero p.lead{color:var(--soft); font-size:19px; margin:20px 0 30px; max-width:540px;} .hero-cta{display:flex; gap:14px; flex-wrap:wrap;} .stats{display:flex; gap:30px; margin-top:34px;} .stat b{font-family:'Fraunces',serif; font-size:28px; font-weight:600; color:var(--ink);} .stat span{display:block; font-size:13px; color:var(--muted);} .hero-art{position:relative; height:430px;} .hero-art img{position:absolute; width:206px; border-radius:12px; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .3s ease;} .hero-art img:nth-child(1){left:6%; top:18px; transform:rotate(-7deg); z-index:2;} .hero-art img:nth-child(2){left:34%; top:0; z-index:3;} .hero-art img:nth-child(3){left:62%; top:30px; transform:rotate(7deg); z-index:2;} .hero-art:hover img:nth-child(2){transform:translateY(-8px);} /* ---------- Trust strip (akan şerit / marquee) ---------- */ .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft);} .trust-in{padding:18px 0; color:var(--soft); font-size:14px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .marquee-track{display:flex; align-items:center; width:max-content; animation:marq 34s linear infinite; will-change:transform;} .trust:hover .marquee-track{animation-play-state:paused;} @keyframes marq{to{transform:translateX(-50%);}} .trust-in span{display:inline-flex; align-items:center; gap:9px; white-space:nowrap; flex:0 0 auto; margin-right:40px;} .trust .dot{display:inline-flex; color:var(--muted); opacity:.9;} .trust .dot svg{width:8px; height:8px; display:block;} /* ---------- Features ---------- */ .features{padding:72px 0;} .feat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px;} .feat{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px;} .feat .ic{width:44px; height:44px; color:var(--accent-2); margin-bottom:14px;} .feat h3{font-size:17px; margin-bottom:7px;} .feat p{color:var(--soft); font-size:14.5px; margin:0;} /* ---------- Steps ---------- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;} .step{padding:24px; border:1px dashed var(--line-2); border-radius:var(--r); position:relative;} .step .n{font-family:'Fraunces',serif; font-size:30px; color:var(--ink); font-weight:600;} .step h3{font-size:17px; margin:8px 0 6px;} .step p{color:var(--soft); font-size:14.5px; margin:0;} /* ---------- Product cards ---------- */ .section-pad{padding:72px 0;} .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap;} .grid-prod{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;} .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, border-color .2s;} .card:hover{transform:translateY(-4px); border-color:var(--line-2);} .card .thumb{position:relative; aspect-ratio:210/297; overflow:hidden; background:var(--card-2); border-bottom:1px solid var(--line);} .card .thumb img{width:100%; height:100%; object-fit:cover;} .card .tag{position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:700; letter-spacing:.12em; padding:4px 10px; border-radius:20px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); color:#fff;} .card .body{padding:15px 15px 17px; display:flex; flex-direction:column; flex:1;} .card h3{font-size:16.5px; margin-bottom:4px;} .card .meta{font-size:12.5px; color:var(--muted); margin-bottom:13px;} .card .row{display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:10px;} .price{font-family:'Fraunces',serif; font-weight:600; font-size:21px; color:var(--ink);} .price small{font-size:12px; color:var(--muted); font-weight:400;} .card .row .btn{padding:9px 15px; font-size:13.5px;} /* filter tabs */ .tabs{display:flex; gap:8px; flex-wrap:wrap;} .tab{padding:8px 17px; border-radius:30px; border:1px solid var(--line-2); color:var(--soft); font-size:14px; font-weight:600; cursor:pointer; background:transparent;} .tab.active{background:var(--signature); border-color:var(--signature); color:var(--signature-ink);} /* ---------- Bundle cards ---------- */ .grid-bundle{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;} .bundle{background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line-2); border-radius:18px; padding:28px; position:relative; display:flex; flex-direction:column;} .bundle.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow);} .bundle .ribbon{position:absolute; top:-12px; right:22px; background:var(--signature); color:var(--signature-ink); font-size:11.5px; font-weight:700; padding:5px 13px; border-radius:20px; letter-spacing:.03em; box-shadow:0 4px 10px -4px rgba(25,90,121,.4);} .bundle h3{font-family:'Fraunces',serif; font-size:23px; font-weight:600;} .bundle .desc{color:var(--soft); font-size:14.5px; margin:6px 0 16px;} .bundle .pr{display:flex; align-items:baseline; gap:10px; margin-bottom:4px;} .bundle .pr b{font-family:'Fraunces',serif; font-size:38px; color:var(--ink); font-weight:600;} .bundle .pr s{color:var(--muted); font-size:17px;} .bundle .save{color:var(--soft); font-size:13.5px; font-weight:600; margin-bottom:18px;} .bundle ul{list-style:none; padding:0; margin:0 0 22px;} .bundle li{display:flex; gap:10px; padding:6px 0; font-size:14.5px; color:var(--soft); border-bottom:1px solid var(--line);} .bundle li .ck{color:var(--soft); flex:0 0 auto; display:inline-flex; align-items:center;} .bundle li .ck svg{width:15px; height:15px; display:block;} /* ---------- Product detail ---------- */ .pd{display:grid; grid-template-columns:380px 1fr; gap:46px; padding:48px 0 20px;} .pd-cover img{border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); width:100%;} .pd-buy{margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px;} .pd-buy .price{font-size:30px;} .pd h1{font-family:'Fraunces',serif; font-weight:600; font-size:38px; margin:8px 0 12px;} .chips{display:flex; gap:9px; flex-wrap:wrap; margin:14px 0 22px;} .chip{background:var(--card-2); border:1px solid var(--line); border-radius:20px; padding:6px 13px; font-size:13px; color:var(--soft);} .topics{columns:2; gap:26px; margin:14px 0 0;} .topics li{break-inside:avoid; padding:7px 0 7px 22px; position:relative; font-size:14.5px; color:var(--soft); list-style:none;} .topics li::before{content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:2px; background:var(--line-2);} .topics{padding:0;} /* ---------- FAQ ---------- */ .faq{max-width:780px; margin:0 auto;} .qa{border:1px solid var(--line); border-radius:12px; margin-bottom:12px; background:var(--card); overflow:hidden;} .qa summary{padding:18px 20px; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; font-size:16px;} .qa summary::-webkit-details-marker{display:none;} .qa summary::after{content:"+"; color:var(--muted); font-size:22px; line-height:1;} .qa[open] summary::after{content:"−";} .qa .a{padding:0 20px 18px; color:var(--soft); font-size:15px;} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(160deg,#E4EEF3,#F4F9FB); border:1px solid var(--line-2); border-radius:22px; padding:46px; text-align:center; margin:20px 0;} .cta-band h2{font-family:'Fraunces',serif; font-size:32px; font-weight:600;} .cta-band p{color:var(--soft); margin:10px auto 24px; max-width:520px;} /* ---------- Koleksiyonlar (marka vitrini) ---------- */ #koleksiyonlar{scroll-margin-top:84px;} .grid-coll{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:20px;} .coll{position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:7px; transition:transform .15s ease, border-color .2s;} .coll:hover{transform:translateY(-4px); border-color:var(--accent);} .coll-ic{font-size:26px; width:54px; height:54px; border-radius:13px; background:var(--card-2); border:1px solid var(--line); display:grid; place-items:center; margin-bottom:6px;} .coll h3{font-family:'Fraunces',serif; font-size:22px; font-weight:600;} .coll p{color:var(--soft); font-size:14.5px; margin:0;} .coll-go{margin-top:10px; color:var(--accent); font-weight:600; font-size:14.5px;} .coll-go.muted{color:var(--muted);} .coll-soon{border-style:dashed; opacity:.92; cursor:default;} .coll-soon:hover{transform:none; border-color:var(--line-2);} .coll-badge{position:absolute; top:16px; right:16px; z-index:4; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; border-radius:20px; padding:4px 10px;} .coll-badge.live{color:var(--accent); background:rgba(31,111,148,.08); border:1px solid rgba(31,111,148,.26);} .coll-badge.soon{color:var(--muted); background:var(--card-2); border:1px solid var(--line);} @media (max-width:620px){ .grid-coll{grid-template-columns:1fr;} } /* ---------- Legal / prose ---------- */ .prose{max-width:820px; margin:0 auto; padding:46px 0;} .prose h1{font-family:'Fraunces',serif; font-size:36px; font-weight:600; margin-bottom:6px;} .prose .upd{color:var(--muted); font-size:13.5px; margin-bottom:30px;} .prose h2{font-size:20px; margin:30px 0 10px; color:var(--ink);} .prose p,.prose li{color:var(--soft); font-size:15.5px;} .prose ul{padding-left:20px;} .prose .ph{color:var(--signature);} /* doldurulacak alan */ .note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:14px 16px; color:var(--soft); font-size:14.5px;} /* ---------- Footer ---------- */ footer.ft{border-top:1px solid var(--line); background:var(--bg-soft); margin-top:40px;} .ft-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding:50px 0 30px;} .ft h4{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 14px;} .ft a{display:block; color:var(--soft); font-size:14px; padding:5px 0;} .ft a:hover{color:var(--ink);} .ft .disc{color:var(--muted); font-size:13px; margin-top:14px; max-width:320px;} .ft-bottom{border-top:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px;} /* ---------- Responsive ---------- */ @media (max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:30px;} .hero-art{height:330px; order:-1;} .feat-grid{grid-template-columns:repeat(2,1fr);} .grid-prod{grid-template-columns:repeat(3,1fr);} .grid-bundle{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;} .pd{grid-template-columns:1fr;} .ft-grid{grid-template-columns:1fr 1fr;} } @media (max-width:620px){ .menu{display:none;} .burger{display:block;} .menu.open{display:flex; position:absolute; top:66px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-soft); border-bottom:1px solid var(--line); padding:10px 24px;} .menu.open a{padding:12px 0; border-bottom:1px solid var(--line);} .hero h1{font-size:38px;} .h-sec{font-size:27px;} .hero p.lead{font-size:17px;} .grid-prod{grid-template-columns:repeat(2,1fr);} .feat-grid{grid-template-columns:1fr;} .topics{columns:1;} .ft-grid{grid-template-columns:1fr;} .stats{gap:20px;} .cta-band{padding:30px 20px;} .wrap{padding:0 18px;} } /* ============================================================ PREMIUM POLISH — hafif & abartısız canlılık (eklenen katman) Sadece transform/opacity. prefers-reduced-motion en altta korur. ============================================================ */ /* Scroll-reveal — JS 'data-reveal' ekler, görününce '.in' verir */ [data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);} [data-reveal].in{opacity:1; transform:none;} /* Yumuşak sayfa girişi */ body{animation:pageFade .45s ease both;} @keyframes pageFade{from{opacity:0;} to{opacity:1;}} /* Header — scroll'da ince gölge + hafif koyulaşma */ header.nav{transition:box-shadow .3s ease, background .25s ease, border-color .25s ease;} header.nav.scrolled{box-shadow:0 8px 24px -18px rgba(18,38,52,.22); background:rgba(244,248,250,.93);} /* Nav link — altında büyüyen ince çizgi */ .menu a{position:relative;} .menu a::after{content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background:var(--accent); border-radius:2px; transition:width .25s ease;} .menu a:hover::after, .menu a.active::after{width:100%;} /* Hero — çok yumuşak, dingin aurora ışıma (statik) */ .hero{position:relative;} .hero::before{content:""; position:absolute; left:-10%; right:-10%; top:-25%; height:520px; z-index:0; pointer-events:none; background:radial-gradient(55% 55% at 75% 26%, rgba(31,111,148,.10), transparent 70%), radial-gradient(45% 45% at 16% 6%, rgba(107,168,201,.07), transparent 72%);} .hero .wrap{position:relative; z-index:1;} .hero-art img{will-change:transform;} /* Buton — hover'da ince ışık süzülmesi (sheen) */ .btn-primary, .btn-gold{position:relative; overflow:hidden;} .btn-primary::after, .btn-gold::after{content:""; position:absolute; top:0; left:-140%; width:55%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;} .btn-primary:hover::after, .btn-gold:hover::after{left:140%;} /* Ürün kartı — kapakta hafif zoom + derin gölge */ .card .thumb img{transition:transform .55s cubic-bezier(.22,.61,.36,1);} .card:hover .thumb img{transform:scale(1.06);} .card{transition:transform .18s ease, border-color .25s ease, box-shadow .3s ease;} .card:hover{box-shadow:0 18px 38px -26px rgba(18,38,52,.18);} /* Koleksiyon kartı — ok kayması + gölge */ .coll{transition:transform .18s ease, border-color .25s ease, box-shadow .3s ease;} .coll:hover{box-shadow:0 18px 38px -26px rgba(18,38,52,.16);} .coll-go{transition:transform .2s ease; display:inline-block;} .coll:hover .coll-go{transform:translateX(4px);} /* Paket kartı — hafif kalkış */ .bundle{transition:transform .18s ease, border-color .25s ease, box-shadow .3s ease;} .bundle:hover{transform:translateY(-4px); box-shadow:0 20px 44px -28px rgba(18,38,52,.18);} /* Özellik kutusu hover */ .feat{transition:transform .18s ease, border-color .25s ease, background .25s ease;} .feat:hover{transform:translateY(-3px); border-color:var(--line-2);} /* Trust ayraçları artık akan şeritte amber elmas (dotPulse kaldırıldı) */ /* Erişilebilir odak halkası */ a:focus-visible, .btn:focus-visible, .tab:focus-visible, summary:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:9px;} /* Mobil — nav alt-çizgisini kapat */ @media (max-width:620px){ .menu.open a::after{display:none;} } /* Hareketi azalt — tüm canlılığı sadeleştir (erişilebilirlik) */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} [data-reveal]{opacity:1 !important; transform:none !important;} .hero-art img{transform:none !important;} .hl, .scroll-progress{animation:none !important;} .hero h1 .hl::before{animation:none !important; transform:rotate(-1.3deg) scaleX(1) !important;} .card::after,.coll::after,.bundle::after,.feat::after{display:none !important;} .marquee-track{animation:none !important; flex-wrap:wrap; width:auto !important; justify-content:center;} .cur-dot,.cur-ring{display:none !important;} } /* ============================================================ PREMIUM v2 — derinlik, ışık ve imza etkileşimler Tüm sayfalara ortak CSS/JS üzerinden uygulanır. ============================================================ */ /* Düz, sıcak krem zemin (Claude tarzı sade kanvas) */ body{ background:var(--bg); } /* Seçim & kaydırma çubuğu — küçük ama profesyonel detaylar */ ::selection{background:rgba(31,111,148,.16); color:var(--ink);} html{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;} *::-webkit-scrollbar{width:12px; height:12px;} *::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:10px; border:3px solid var(--bg);} *::-webkit-scrollbar-thumb:hover{background:#9DB6C4;} /* Üstte ince okuma/ilerleme çubuğu (turuncu) */ .scroll-progress{position:fixed; top:0; left:0; height:3px; width:100%; z-index:100; pointer-events:none;} .scroll-progress i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 6px rgba(31,111,148,.3); transition:width .12s ease-out;} /* Marka rozeti — çok hafif sıcak gölge */ .brand .mark{box-shadow:0 4px 12px -6px rgba(25,90,121,.38);} /* Hero başlığı — vurgulu kelimede el-çizimi "fosforlu" işaretleme (imza gesti) */ .hero h1 .hl{position:relative; isolation:isolate; color:var(--ink); font-style:italic; white-space:nowrap;} .hero h1 .hl::before{content:""; position:absolute; left:-.07em; right:-.11em; bottom:.06em; height:.5em; z-index:-1; background:var(--accent-2); opacity:.42; border-radius:.18em .4em .22em .55em / .9em .55em .85em .5em; transform-origin:left; transform:rotate(-1.3deg) scaleX(1); animation:hlDraw .55s cubic-bezier(.6,0,.25,1) .2s both;} @keyframes hlDraw{from{transform:rotate(-1.3deg) scaleX(0);} to{transform:rotate(-1.3deg) scaleX(1);}} /* Hero aurora — çok yavaş, dingin sürüklenme (statik yerine canlı) */ /* Hero ışıması statik (Claude tarzı dinginlik) — drift kaldırıldı */ /* Hero istatistikleri — ince ayraçlı, daha okunaklı */ .stats{align-items:flex-start;} .stat{position:relative; padding-right:30px;} .stat + .stat{padding-left:30px; border-left:1px solid var(--line);} .stat b{letter-spacing:-.01em;} /* Güven şeridi pill'leri (akan şeritte) */ .trust-in span{padding:7px 15px; border-radius:30px; border:1px solid var(--line); background:var(--card); transition:border-color .25s, color .25s;} .trust-in span:hover{border-color:var(--line-2); color:var(--ink);} /* Spotlight — fareyi izleyen çok hafif sıcak parıltı (kart/koleksiyon/paket/özellik) */ .card,.coll,.bundle,.feat{--mx:50%; --my:0%;} .card::after,.coll::after,.bundle::after,.feat::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; border-radius:inherit; transition:opacity .35s ease; background:radial-gradient(240px 240px at var(--mx) var(--my), rgba(31,111,148,.06), transparent 62%); } .card:hover::after,.coll:hover::after,.bundle:hover::after,.feat:hover::after{opacity:1;} /* İmza buton (turuncu) — düz, sıcak yumuşak gölge */ .btn-gold{background:var(--signature); color:var(--signature-ink); box-shadow:0 1px 2px rgba(18,38,52,.06), 0 8px 20px -14px rgba(18,38,52,.4);} .btn-gold:hover{filter:brightness(1.04); box-shadow:0 1px 2px rgba(18,38,52,.08), 0 12px 26px -14px rgba(18,38,52,.5);} .btn-primary, .btn-gold{position:relative; overflow:hidden;} .btn-gold::after{background:linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent) !important;} /* Birincil buton — sıcak yumuşak gölge */ .btn-primary{box-shadow:0 1px 2px rgba(18,38,52,.06), 0 8px 20px -14px rgba(18,38,52,.4);} /* Öne çıkan paket — sade, statik turuncu çerçeve (minimalist) */ .bundle.featured{box-shadow:0 0 0 1.5px var(--accent), 0 16px 36px -26px rgba(18,38,52,.2);} /* Fiyat — hizalı rakamlar */ .price{font-variant-numeric:tabular-nums;} /* Ürün sayfası — mobilde sabit alt satın-alma çubuğu (dönüşüm) */ .buybar{position:fixed; left:0; right:0; bottom:0; z-index:60; transform:translateY(120%); transition:transform .38s cubic-bezier(.22,.61,.36,1); background:rgba(244,248,250,.95); backdrop-filter:saturate(140%) blur(12px); border-top:1px solid var(--line); padding:11px 18px calc(11px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 -10px 28px -18px rgba(18,38,52,.22);} .buybar.show{transform:none;} .buybar .bb-l{display:flex; flex-direction:column; line-height:1.25;} .buybar .bb-l small{color:var(--muted); font-size:11.5px;} .buybar .bb-l b{font-family:'Fraunces',serif; font-size:20px; color:var(--ink); font-weight:600;} .buybar .btn{padding:11px 22px;} @media (min-width:760px){ .buybar{display:none !important;} } /* Mobilde alt çubuk açıkken içeriğin altında nefes payı */ @media (max-width:759px){ body.has-buybar{padding-bottom:74px;} } /* ---------- İkon ailesi (özel çizgi seti — emoji yerine) ---------- */ .ic, .coll-ic{display:inline-grid; place-items:center;} .coll-ic svg{width:28px; height:28px;} .ic svg{width:100%; height:100%; display:block;} .ic, .coll-ic{color:var(--accent-2);} /* gövde: açık terracotta (tema ile uyumlu) */ .ic .tick, .coll-ic .tick{stroke:var(--accent);} /* daha koyu terracotta "marker tick" */ .feat:hover .ic{color:var(--accent);} .coll:hover .coll-ic{border-color:var(--line-2);} /* ---------- Mürekkep noktası imleç (additive, native imleç gizlenmez) ---------- */ .cur-dot, .cur-ring{position:fixed; left:0; top:0; z-index:200; pointer-events:none; border-radius:50%; will-change:transform; transform:translate(-100px,-100px);} .cur-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--accent); box-shadow:0 0 0 2px rgba(255,255,255,.92); transition:width .14s ease, height .14s ease, margin .14s ease;} .cur-ring{width:26px; height:26px; margin:-13px 0 0 -13px; border:1.5px solid rgba(20,40,52,.34); opacity:.8; transition:width .2s ease, height .2s ease, margin .2s ease, opacity .2s ease, background .2s ease;} .cur-ring.hot{width:40px; height:40px; margin:-20px 0 0 -20px; border-color:rgba(20,40,52,.45); background:rgba(20,40,52,.04);} .cur-dot.press{width:5px; height:5px; margin:-2.5px 0 0 -2.5px;} /* ---------- Dil seçici (TR / EN) — site diliyle uyumlu, minimal ---------- */ .lang-switch{display:inline-flex; align-items:center; font-family:'Inter',sans-serif; font-weight:600; font-size:13px;} .lang-switch button{position:relative; background:none; border:0; cursor:pointer; padding:6px 7px; color:var(--muted); line-height:1; font:inherit; transition:color .2s;} .lang-switch button:hover{color:var(--ink);} .lang-switch button.active{color:var(--ink);} .lang-switch button.active::after{content:""; position:absolute; left:7px; right:7px; bottom:1px; height:2px; background:var(--accent); border-radius:2px;} .lang-switch .sep{color:var(--line-2); font-size:12px;} @media (max-width:620px){ .lang-switch button{padding:6px 5px;} .nav-cta .btn-primary{display:none;} /* mobilde fazlalık: menüde "Dersler" zaten var */ .nav-cta{gap:6px;} } /* Dil önerisi — tarayıcı diline göre nazik toast */ .lang-suggest{position:fixed; left:50%; bottom:22px; transform:translate(-50%,18px); opacity:0; z-index:120; display:flex; align-items:center; gap:12px; pointer-events:none; max-width:92vw; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:11px 12px 11px 18px; box-shadow:0 14px 34px -18px rgba(18,38,52,.35); transition:opacity .35s ease, transform .35s ease;} .lang-suggest.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;} .lang-suggest p{margin:0; font-size:14px; color:var(--ink);} .lang-suggest .ls-yes{font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; color:var(--accent-ink); background:var(--accent); border:0; border-radius:9px; padding:8px 14px; cursor:pointer; white-space:nowrap;} .lang-suggest .ls-yes:hover{background:var(--accent-h);} .lang-suggest .ls-no{background:none; border:0; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px;} .lang-suggest .ls-no:hover{color:var(--ink);} @media (max-width:520px){ .lang-suggest{left:12px; right:12px; transform:translateY(18px); max-width:none;} .lang-suggest.show{transform:translateY(0);} } /* ============================================================ LOOKSMAX koleksiyonu — derin glacier mavisi "deri" (ortak iskelet, farklı tema) ile aksan token'larını değiştirir; nav/footer/ödeme/yapı aynı kalır (ayrı site hissi vermez). ============================================================ */ body[data-collection="looksmax"]{ --accent:#1A5F80; /* derin glacier — beyaz metin AA ~7:1 */ --accent-2:#5FA0BE; /* açık çelik mavisi — dekoratif (hero marker, ikon gövdesi) */ --accent-h:#15566F; /* hover koyu */ --signature:#1A5F80; --signature-ink:#FFFFFF; } body[data-collection="looksmax"] ::selection{background:rgba(95,160,190,.22); color:var(--ink);} body[data-collection="looksmax"] .brand .mark{box-shadow:0 4px 12px -6px rgba(26,95,128,.38);} body[data-collection="looksmax"] .scroll-progress i{box-shadow:0 0 6px rgba(26,95,128,.3);} body[data-collection="looksmax"] .hero::before{ background:radial-gradient(55% 55% at 75% 26%, rgba(95,160,190,.12), transparent 70%), radial-gradient(45% 45% at 16% 6%, rgba(26,95,128,.06), transparent 72%);} body[data-collection="looksmax"] .card::after, body[data-collection="looksmax"] .coll::after, body[data-collection="looksmax"] .bundle::after, body[data-collection="looksmax"] .feat::after{ background:radial-gradient(240px 240px at var(--mx) var(--my), rgba(95,160,190,.08), transparent 62%);} body[data-collection="looksmax"] .coll-badge.live{ color:var(--accent); background:rgba(26,95,128,.08); border:1px solid rgba(26,95,128,.28);} /* ============================================================ WELLNESS koleksiyonu — serin teal "deri" (ortak iskelet, farklı tema) ============================================================ */ body[data-collection="wellness"]{ --accent:#2A767C; /* serin teal — beyaz metin AA ~5.3:1 */ --accent-2:#5FA8AD; /* açık teal — dekoratif */ --accent-h:#215E63; /* hover koyu */ --signature:#2A767C; --signature-ink:#FFFFFF; } body[data-collection="wellness"] ::selection{background:rgba(42,118,124,.20); color:var(--ink);} body[data-collection="wellness"] .brand .mark{box-shadow:0 4px 12px -6px rgba(33,94,99,.4);} body[data-collection="wellness"] .scroll-progress i{box-shadow:0 0 6px rgba(33,94,99,.3);} body[data-collection="wellness"] .hero::before{ background:radial-gradient(55% 55% at 75% 26%, rgba(95,168,173,.16), transparent 70%), radial-gradient(45% 45% at 16% 6%, rgba(42,118,124,.07), transparent 72%);} body[data-collection="wellness"] .card::after, body[data-collection="wellness"] .coll::after, body[data-collection="wellness"] .bundle::after, body[data-collection="wellness"] .feat::after{ background:radial-gradient(240px 240px at var(--mx) var(--my), rgba(42,118,124,.08), transparent 62%);} body[data-collection="wellness"] .coll-badge.live{ color:var(--accent); background:rgba(42,118,124,.08); border:1px solid rgba(42,118,124,.28);} /* Wellness — ürün görsel galerisi */ .gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:14px;} .gallery img{width:100%; border-radius:12px; border:1px solid var(--line); background:var(--card);} @media (max-width:620px){ .gallery{grid-template-columns:1fr;} } /* Wellness — opsiyonel ₺ (Türkiye) butonu, ince ikincil */ .btn-tr{background:transparent; color:var(--accent); border:1px solid var(--line-2); font-size:13.5px; padding:10px 16px;} .btn-tr:hover{border-color:var(--signature); color:var(--signature);} /* Wellness — kare kapak (kare kompozit görseller tam görünsün) */ body[data-collection="wellness"] .card .thumb{aspect-ratio:1/1;} /* ============================================================ PREMIUM v3 — "bitiş" dokunuşları (2026-06-27): sakin, düşük riskli, çoğunlukla CSS. prefers-reduced-motion en altta korunur. ============================================================ */ /* 1) Tipografi dengesi — başlıklarda yetim kelime / kötü satır sonu olmasın */ h1,h2,h3,.h-sec,.hero h1,.cta-band h2,.bundle h3,.coll h3,.feat h3,.qa summary{ text-wrap:balance; } p.lead,.sub,.feat p,.coll p,.bundle .desc,.prose p,.card .meta,.step p{ text-wrap:pretty; } /* 2) Butonlarda dokunsal "basma" + yumuşak odak halkası */ .btn:active{ transform:translateY(0) scale(.97); transition-duration:.06s; } .btn-primary:focus-visible,.btn-gold:focus-visible{ box-shadow:0 0 0 4px rgba(31,111,148,.16); } /* 3) Hero birincil CTA — sakin, statik "sahne" parıltısı (skin rengine uyar) */ .hero-cta .btn-gold, .hero-cta .btn-primary{ box-shadow:0 1px 2px rgba(18,38,52,.06), 0 12px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent); } .hero-cta .btn-gold:hover, .hero-cta .btn-primary:hover{ box-shadow:0 1px 2px rgba(18,38,52,.08), 0 16px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent); } /* 4) Kart/koleksiyon/paket — hover'da biraz daha derin gölge (premium derinlik) */ .card:hover{ box-shadow:0 22px 46px -26px rgba(18,38,52,.2); } .coll:hover{ box-shadow:0 22px 46px -26px rgba(18,38,52,.18); } .bundle:hover{ box-shadow:0 24px 50px -28px rgba(18,38,52,.2); } /* 5) SSS akordeonu — aç/kapa kaymadan yumuşak açılır (native, JS yok; desteklemeyende anında açılır) */ :root{ interpolate-size: allow-keywords; } .qa::details-content{ block-size:0; overflow:clip; transition:block-size .32s cubic-bezier(.22,.61,.36,1), content-visibility .32s; transition-behavior:allow-discrete; } .qa[open]::details-content{ block-size:auto; } /* 6) Footer linkleri — hover'da ince accent alt-çizgi (metin genişliğinde) */ .ft-grid a:not(.brand):hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--accent); } /* 7) Sayfalar arası yumuşak crossfade (destekleyen tarayıcı; hover-prefetch ile eşleşir) */ @view-transition{ navigation:auto; } /* Hareketi azalt — v3 eklerini de sadeleştir */ @media (prefers-reduced-motion: reduce){ .qa::details-content{ transition:none !important; } ::view-transition-old(root),::view-transition-new(root){ animation:none !important; } }