/* ========================================================================= YAPRAK-SITE.COM — Tasarım Sistemi (main.css) İki temalı: KOYU (varsayılan) + AÇIK. Tema ile. Elektrik yeşili vurgu • editoryal • premium. Not: Cihaz/uygulama mockup'ları (.site-mock, .dash, telefon) her iki temada da "ekran" hissi için koyu (tile) kalır; iç metinleri --tile-* ile sabittir. ========================================================================= */ /* -------------------------------------------------- TEMA: KOYU (varsayılan) */ :root{ --ink: #06100B; /* sayfa zemini */ --ink-2: #0A1711; --ink2: #0A1711; /* (inline stiller için alias) */ --surface: #0D1F16; /* kart zemini */ --surface-2: #10291D; --line: rgba(199,249,75,.14); --line-soft: rgba(255,255,255,.08); --lime: #C7F94B; /* DOLGU vurgusu (buton/rozet/band) — her iki tema */ --lime-2: #A6E635; --lime-ink: #C7F94B; /* METİN/İKON vurgusu (temaya göre değişir) */ --emerald: #35E39A; /* parlak emerald (dolgu / tile) */ --emerald-ink:#35E39A; /* emerald metin (temaya göre) */ --amber: #F5C24B; --cream: #F2F0E6; /* ANA METİN */ --muted: #93A79C; --muted-2: #6C7E74; /* Koyu tile (cihaz/uygulama ekranları) — TEMADAN BAĞIMSIZ */ --tile: #0B1610; --tile-2: #10241A; --tile-line: rgba(255,255,255,.08); --tile-text: #F2F0E6; --tile-muted: #93A79C; --grid-line: rgba(255,255,255,.025); --shadow-lime:0 24px 70px -24px rgba(199,249,75,.42); --shadow-deep:0 40px 90px -30px rgba(0,0,0,.72); --shadow-soft:0 30px 70px -34px rgba(0,0,0,.6); --radius:22px; --maxw:1200px; color-scheme:dark; --icon-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); --icon-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z'/%3E%3C/svg%3E"); } /* -------------------------------------------------- TEMA: AÇIK */ :root[data-theme="light"]{ --ink: #F4F3EC; --ink-2: #FFFFFF; --ink2: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEF0E7; --line: rgba(18,54,36,.16); --line-soft: rgba(15,30,22,.10); --lime-ink: #0E7A46; /* okunur koyu yeşil metin */ --emerald-ink:#0C8A55; --amber: #B07D00; --cream: #14231A; /* ana metin (koyu) */ --muted: #5C6B61; --muted-2: #8A968E; --grid-line: rgba(20,45,32,.05); --shadow-deep:0 30px 70px -30px rgba(20,45,32,.28); --shadow-soft:0 24px 60px -30px rgba(20,45,32,.18); color-scheme:light; /* --lime, --emerald, --tile-* açık temada da aynı (parlak/koyu tile) kalır */ } /* ---------------------------------------------------------- Reset-ish */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--cream); font-family:'Manrope',system-ui,sans-serif;font-size:17px;line-height:1.6; letter-spacing:-.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased; transition:background .5s ease, color .5s ease; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--lime);color:#08150D} /* Atmosfer */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(60% 50% at 78% -8%, rgba(53,227,154,.13), transparent 60%), radial-gradient(50% 45% at 8% 8%, rgba(199,249,75,.11), transparent 60%), radial-gradient(60% 60% at 50% 118%, rgba(53,227,154,.09), transparent 60%), var(--ink); transition:background .5s ease; } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.9; background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%); } .grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .cursor-glow{ position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%; transform:translate(-50%,-50%);pointer-events:none;z-index:0; background:radial-gradient(circle, rgba(199,249,75,.09), transparent 62%); transition:opacity .4s ease;opacity:0; } @media (hover:hover){ .cursor-glow{opacity:1} } /* ---------------------------------------------------------- Tipografi */ .font-display{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;line-height:1} .font-serif{font-family:'Fraunces',Georgia,serif} .italic-accent{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.02em} .text-lime{color:var(--lime-ink)} .text-emerald{color:var(--emerald-ink)} .text-muted{color:var(--muted)} h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;line-height:1.02;font-weight:800;margin:0;color:var(--cream)} .display-xl{font-size:clamp(2.7rem,7vw,6.2rem)} .display-lg{font-size:clamp(2.2rem,5vw,4.2rem)} .display-md{font-size:clamp(1.7rem,3.5vw,2.8rem)} /* ---------------------------------------------------------- Layout */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{position:relative;padding:clamp(64px,10vw,140px) 0} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--lime-ink)} .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 12px rgba(53,227,154,.5)} .tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px; font-size:12.5px;font-weight:600;letter-spacing:.02em; background:color-mix(in srgb, var(--cream) 6%, transparent); border:1px solid var(--line-soft);color:var(--muted)} .tag.new{background:color-mix(in srgb, var(--lime) 16%, transparent); border-color:color-mix(in srgb, var(--lime) 32%, transparent);color:var(--lime-ink)} /* ---------------------------------------------------------- Butonlar */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:'Manrope',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em; padding:15px 26px;border-radius:14px;border:1px solid transparent;cursor:pointer; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, color .3s, border-color .3s;will-change:transform} .btn svg{width:18px;height:18px} .btn-primary{background:var(--lime);color:#0A160C;box-shadow:var(--shadow-lime)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 30px 80px -20px rgba(160,200,50,.55)} .btn-ghost{background:color-mix(in srgb, var(--cream) 4%, transparent);color:var(--cream);border-color:var(--line-soft)} .btn-ghost:hover{transform:translateY(-3px);border-color:var(--line);background:color-mix(in srgb, var(--lime) 8%, transparent)} .btn-lg{padding:18px 32px;font-size:16.5px;border-radius:16px} /* ---------------------------------------------------------- Kartlar */ .card{position:relative;background:var(--surface);border:1px solid var(--line-soft); border-radius:var(--radius);box-shadow:var(--shadow-soft); transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .5s;overflow:hidden} .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--lime) 10%, transparent), transparent 55%);opacity:0;transition:opacity .4s} .card:hover{transform:translateY(-6px);border-color:var(--line);box-shadow:var(--shadow-deep)} .card:hover::after{opacity:1} .icon-badge{width:54px;height:54px;border-radius:15px;display:grid;place-items:center; background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--lime) 22%, transparent), color-mix(in srgb, var(--emerald) 10%, transparent)); border:1px solid var(--line);color:var(--lime-ink)} .icon-badge svg{width:26px;height:26px} /* ---------------------------------------------------------- İstatistik */ .stat-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em; font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1; background:linear-gradient(180deg,var(--cream),var(--lime-ink));-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------------------------------------------------------- Scroll reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------------------------------------------------------- Marquee */ .marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:18px;flex-shrink:0;animation:marquee 46s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-ribbon{display:flex;gap:44px;flex-shrink:0;animation:marquee 30s linear infinite;white-space:nowrap} @keyframes marquee{to{transform:translateX(-50%)}} .ribbon{background:var(--lime);color:#0A160C;overflow:hidden;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15)} .ribbon .item{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;display:inline-flex;align-items:center;gap:44px;padding:13px 0} .ribbon .dot{width:7px;height:7px;border-radius:50%;background:#0A160C} /* ---------------------------------------------------------- Nav */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,border-color .4s,backdrop-filter .4s} .nav-inner{display:flex;align-items:center;gap:14px;justify-content:space-between;height:74px} .nav.scrolled{background:color-mix(in srgb, var(--ink) 78%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)} .brand{display:flex;align-items:center;gap:3px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;margin-right:auto} .brand .leaf{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%, var(--lime), var(--emerald));color:#08150D} .nav-links{display:flex;align-items:center;gap:30px} .nav-links a{font-size:14.5px;font-weight:600;color:var(--muted);transition:color .25s;position:relative} .nav-links a:hover,.nav-links a.active{color:var(--cream)} .nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--lime-ink);border-radius:2px} .theme-toggle{width:44px;height:44px;border-radius:12px;flex-shrink:0; border:1px solid var(--line-soft);background:color-mix(in srgb, var(--cream) 4%, transparent); color:var(--cream);display:grid;place-items:center;cursor:pointer; transition:border-color .25s,background .25s,transform .25s} .theme-toggle:hover{border-color:var(--line);transform:translateY(-2px)} .theme-toggle::before{content:"";width:19px;height:19px;background:var(--cream); -webkit-mask:center/contain no-repeat var(--icon-sun);mask:center/contain no-repeat var(--icon-sun)} :root[data-theme="light"] .theme-toggle::before{-webkit-mask-image:var(--icon-moon);mask-image:var(--icon-moon)} .nav-burger{display:none;width:44px;height:44px;border-radius:12px;flex-shrink:0;border:1px solid var(--line-soft);background:color-mix(in srgb, var(--cream) 4%, transparent);cursor:pointer} .nav-burger svg{stroke:var(--cream)} .mobile-menu{position:fixed;inset:0;z-index:49;background:color-mix(in srgb, var(--ink) 97%, transparent);backdrop-filter:blur(20px); display:flex;flex-direction:column;justify-content:center;gap:8px;padding:32px; transform:translateY(-100%);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .mobile-menu.open{transform:none} .mobile-menu a{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.8rem,7vw,2.6rem);color:var(--cream);padding:8px 0;border-bottom:1px solid var(--line-soft)} @media(max-width:900px){ .nav-links,.nav-cta-desktop{display:none} .nav-burger{display:grid;place-items:center} } /* ---------------------------------------------------------- Portfolio mockup (KOYU tile) */ .site-mock{--mk:var(--lime);background:var(--tile);border:1px solid var(--tile-line);border-radius:20px;overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s} .site-mock:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--shadow-deep);border-color:color-mix(in srgb, var(--mk) 40%, transparent)} .mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--tile-line)} .mock-bar i{width:9px;height:9px;border-radius:50%;background:#2b3a31;display:block} .mock-bar span{margin-left:8px;font-size:10.5px;color:var(--tile-muted);font-family:'Manrope';letter-spacing:.02em} .mock-hero{height:150px;position:relative;display:grid;place-items:center; background:radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--mk) 55%, transparent), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--mk) 28%, var(--tile)), var(--tile))} .mock-hero .emoji{font-size:52px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))} .mock-hero .disc{position:absolute;top:12px;left:12px;background:#0A160C;color:var(--mk);font-family:'Bricolage Grotesque';font-weight:800;font-size:12px;padding:5px 10px;border-radius:8px;letter-spacing:-.02em} .mock-body{padding:15px 16px 18px} .mock-body h4{font-family:'Bricolage Grotesque';font-size:16px;font-weight:700;margin-bottom:6px;color:var(--tile-text)} .mock-stars{color:var(--amber);font-size:12px;letter-spacing:2px;margin-bottom:10px} .mock-price{display:flex;align-items:baseline;gap:9px;margin-bottom:13px} .mock-price .now{font-family:'Bricolage Grotesque';font-weight:800;font-size:21px;color:var(--mk)} .mock-price .old{font-size:13px;color:var(--tile-muted);text-decoration:line-through} .mock-btn{display:block;text-align:center;background:var(--mk);color:#0A160C;font-family:'Bricolage Grotesque';font-weight:800;font-size:13.5px;padding:11px;border-radius:10px;letter-spacing:-.01em} .mock-foot{display:flex;gap:6px;margin-top:10px} .mock-foot span{font-size:10px;color:var(--tile-muted);background:rgba(255,255,255,.05);border:1px solid var(--tile-line);padding:4px 8px;border-radius:6px} /* ---------------------------------------------------------- Görsel tabanlı örnek çalışma kartı Tarayıcı çerçevesi (.mock-bar) korunur; içine dikey 9:16 (1080x1920) görsel konur. Kullanım:
domain.com
...
Not: Görsel 9:16'dan uzunsa üstten gösterilir, hover'da yavaşça aşağı kayar. */ .site-shot{background:var(--tile);border:1px solid var(--tile-line);border-radius:20px;overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s} .site-shot:hover{transform:translateY(-8px);box-shadow:var(--shadow-deep);border-color:var(--line)} /* .shot: dikey 9:16 görsel kabı — hem kartlarda hem telefon ekranında kullanılır */ .shot{position:relative;width:100%;aspect-ratio:1080/1920;overflow:hidden;background:var(--tile-2)} .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:object-position 2.8s ease} .site-shot:hover .shot img,.phone-screen:hover .shot img{object-position:bottom center} /* .hero-slider: telefon ekranındaki görsel, her 3sn'de bir yumuşak geçişle değişir (main.js) */ .hero-slider img{opacity:0;transition:opacity 1.1s ease,object-position 2.8s ease;z-index:1} .hero-slider img.is-active{opacity:1;z-index:2} /* ---------------------------------------------------------- Panel dashboard mockup (KOYU tile) */ .dash{background:linear-gradient(160deg,var(--tile-2),var(--tile));border:1px solid var(--tile-line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-deep)} .dash-top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--tile-line);background:rgba(255,255,255,.02)} .dash-top i{width:10px;height:10px;border-radius:50%} .dash-grid{display:grid;grid-template-columns:200px 1fr;min-height:340px} .dash-side{border-right:1px solid var(--tile-line);padding:18px 14px;display:flex;flex-direction:column;gap:5px;background:rgba(0,0,0,.16)} .dash-side a{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tile-muted);padding:9px 11px;border-radius:10px} .dash-side a.on{background:rgba(199,249,75,.14);color:var(--lime)} .dash-main{padding:20px} .dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px} .kpi{background:rgba(255,255,255,.03);border:1px solid var(--tile-line);border-radius:14px;padding:14px} .kpi .l{font-size:11px;color:var(--tile-muted);text-transform:uppercase;letter-spacing:.08em} .kpi .v{font-family:'Bricolage Grotesque';font-weight:800;font-size:24px;margin-top:4px;color:var(--tile-text)} .dash-chart{display:flex;align-items:flex-end;gap:8px;height:110px;padding:14px;background:rgba(255,255,255,.02);border:1px solid var(--tile-line);border-radius:14px} .dash-chart .bar{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--lime),rgba(53,227,154,.35));opacity:.9} .dash-row{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border:1px solid var(--tile-line);border-radius:12px;margin-top:9px;font-size:13px;color:var(--tile-text)} .pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px} .pill.ok{background:rgba(53,227,154,.16);color:#35E39A} .pill.wait{background:rgba(245,194,75,.16);color:#F5C24B} /* tile içindeki utility metinleri parlak kalsın */ .dash .text-lime{color:var(--lime)} .dash .text-emerald{color:var(--emerald)} .dash .text-muted{color:var(--tile-muted)} .dash .chip-live{background:rgba(53,227,154,.16);border-color:rgba(53,227,154,.30);color:var(--tile-text)} /* ---------------------------------------------------------- FAQ */ .faq-item{border:1px solid var(--line-soft);border-radius:16px;margin-bottom:12px;overflow:hidden;background:var(--surface);transition:border-color .3s,background .5s} .faq-item[open]{border-color:var(--line)} .faq-item summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:'Bricolage Grotesque';font-weight:700;font-size:17.5px;color:var(--cream)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .q-ico{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);color:var(--lime-ink);display:grid;place-items:center;transition:transform .3s,background .3s,color .3s} .faq-item[open] summary .q-ico{transform:rotate(45deg);background:var(--lime);color:#0A160C} .faq-item .a{padding:0 22px 22px;color:var(--muted);font-size:15.5px;line-height:1.7} /* ---------------------------------------------------------- Pricing */ .price-card{position:relative;padding:34px 30px;height:100%} .price-card.featured{background:linear-gradient(160deg, color-mix(in srgb, var(--lime) 12%, var(--surface)), var(--surface));border-color:var(--line)} .price-card .amt{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(2rem,3vw,2.6rem);margin:6px 0} .price-feat{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-soft);font-size:14.5px} .price-feat svg{flex-shrink:0;width:20px;height:20px;color:var(--lime-ink);margin-top:1px} .ribbon-badge{position:absolute;top:18px;right:18px;background:var(--lime);color:#0A160C;font-family:'Bricolage Grotesque';font-weight:800;font-size:11.5px;padding:5px 12px;border-radius:999px;letter-spacing:.02em} /* ---------------------------------------------------------- Footer */ .footer{border-top:1px solid var(--line-soft);padding:70px 0 34px;position:relative} .footer a{color:var(--muted);font-size:14.5px;transition:color .25s} .footer a:hover{color:var(--lime-ink)} /* Footer: "Son Blog Yazıları" açılır/kapanır blok */ .footer-accordion{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden; background:color-mix(in srgb, var(--cream) 3%, transparent);transition:border-color .3s,background .3s} .footer-accordion[open]{border-color:var(--line)} .footer-accordion summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center; justify-content:space-between;gap:16px;font-family:'Bricolage Grotesque';font-weight:700;font-size:15px;color:var(--cream)} .footer-accordion summary::-webkit-details-marker{display:none} .footer-accordion summary .q-ico{flex-shrink:0;width:26px;height:26px;border-radius:8px;border:1px solid var(--line); color:var(--lime-ink);display:grid;place-items:center;font-size:15px;line-height:1;transition:transform .3s,background .3s,color .3s} .footer-accordion[open] summary .q-ico{transform:rotate(45deg);background:var(--lime);color:#0A160C} .footer-accordion-body{padding:2px 12px 14px;display:grid;gap:2px} .footer-post-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:10px; transition:background .2s;font-size:14px} .footer-post-row:hover{background:color-mix(in srgb, var(--lime) 7%, transparent)} .footer-post-row-cat{flex-shrink:0;width:32px;height:32px;border-radius:9px;display:grid;place-items:center; font-size:14px;background:color-mix(in srgb, var(--mk, var(--lime)) 18%, transparent)} .footer-post-row-body{display:flex;flex-direction:column;gap:2px;min-width:0} .footer-post-row-title{color:var(--cream);font-size:13.5px;font-weight:600;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px} .footer-post-row-date{color:var(--muted);font-size:12px} @media (max-width:640px){.footer-post-row-title{max-width:60vw}} /* ---------------------------------------------------------- Animasyonlar */ @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} @keyframes floaty-2{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(6deg)}} @keyframes glowpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}} @keyframes spin-slow{to{transform:rotate(360deg)}} @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}} .float{animation:floaty 6s ease-in-out infinite} .float-2{animation:floaty-2 8s ease-in-out infinite} .spin-slow{animation:spin-slow 26s linear infinite} .hero-rise{opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards} /* Yardımcılar */ .glow-ring{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0} .chip-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cream);background:rgba(53,227,154,.12);border:1px solid rgba(53,227,154,.28);padding:7px 14px;border-radius:999px} .chip-live .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 0 rgba(53,227,154,.6);animation:glowpulse 1.8s infinite} .underline-lime{background:linear-gradient(transparent 62%, color-mix(in srgb, var(--lime) 45%, transparent) 62%)} /* Hero telefon ekranı (koyu tile, tema bağımsız okunur) */ .phone-screen{--mk:var(--lime);color:var(--tile-text)} .phone-screen h4{color:var(--tile-text)} .phone-screen .mock-price .now{color:var(--mk)} .phone-screen .mock-price .old{color:var(--tile-muted)} .phone-screen .mock-btn{background:var(--mk);color:#0A160C} .phone-screen .mock-foot span{color:var(--tile-muted);background:rgba(255,255,255,.05);border:1px solid var(--tile-line)} .notif{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px 16px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:12px} .notif .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb, var(--lime) 16%, transparent);color:var(--lime-ink);flex-shrink:0} .notif .t{font-size:13.5px;font-weight:700;line-height:1.2;color:var(--cream)} .notif .s{font-size:12px;color:var(--muted)} /* .work-badge: hero görselini işaret eden "son çalışmalar" başlığı + eğik ok */ .work-badge{display:flex;flex-direction:column;align-items:flex-end;gap:2px} .work-badge-arrow{color:var(--lime-ink);margin-right:10px} /* .hero-rotator: hero başlığı ve istatistik satırı için senkron metin geçişi (main.js) */ .hero-rotator{display:grid} .hero-rotator-slide{grid-area:1/1;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;pointer-events:none} .hero-rotator-slide.is-active{opacity:1;transform:none;pointer-events:auto} /* .faq-grid: SSS kartları yan yana 2 sütun, her sütunda 5 soru */ .faq-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:28px} /* ---------------------------------------------------------- Blog */ .post-card{display:flex;flex-direction:column;overflow:hidden} .post-thumb{height:150px;position:relative;display:grid;place-items:center; background:radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--mk,var(--lime)) 45%, transparent), transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--mk,var(--lime)) 22%, var(--surface)), var(--surface))} .post-thumb .emoji{font-size:46px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))} .post-cat{position:absolute;top:12px;left:12px;font-family:'Bricolage Grotesque';font-weight:800;font-size:11px; letter-spacing:.04em;text-transform:uppercase;color:#0A160C;background:var(--mk,var(--lime));padding:5px 10px;border-radius:8px} .post-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .post-body h3{font-size:19px;line-height:1.25;margin-bottom:10px} .post-meta{font-size:12.5px;color:var(--muted-2);margin-bottom:12px;display:flex;gap:12px;flex-wrap:wrap} /* Yazı içeriği */ .article{max-width:100%;} .article > *{margin:0 0 1.15em} .article h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(1.4rem,2.6vw,1.95rem); letter-spacing:-.02em;line-height:1.15;margin:1.7em 0 .55em;color:var(--cream)} .article h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:1.25rem;margin:1.4em 0 .45em;color:var(--cream)} .article p{font-size:17px;line-height:1.8;color:color-mix(in srgb, var(--cream) 72%, var(--muted))} .article strong{color:var(--cream);font-weight:700} .article a{color:var(--lime-ink);text-decoration:underline;text-underline-offset:3px} .article a.btn{text-decoration:none} .article a.btn-primary{color:#0A160C} .article a.btn-ghost{color:var(--cream)} .article ul,.article ol{padding-left:1.25em} .article li{font-size:17px;line-height:1.7;margin:.5em 0;color:color-mix(in srgb, var(--cream) 72%, var(--muted))} .article li::marker{color:var(--lime-ink)} .article .lead{font-size:19px;line-height:1.7;color:var(--cream)} .article blockquote{border-left:3px solid var(--lime);padding:6px 0 6px 20px;margin:1.4em 0; font-family:'Fraunces';font-style:italic;font-size:19px;color:var(--cream)} /* Sidebar + etiketler */ .sidebar{position:sticky;top:96px} .tagcloud{display:flex;flex-wrap:wrap;gap:8px} .tag-chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px; background:color-mix(in srgb, var(--cream) 5%, transparent);border:1px solid var(--line-soft);color:var(--muted); transition:color .2s,border-color .2s,background .2s} .tag-chip:hover{color:var(--lime-ink);border-color:var(--line);background:color-mix(in srgb, var(--lime) 8%, transparent)} .side-title{font-family:'Bricolage Grotesque';font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:16px} /* ========================================================================= MOBİL UYUM (responsive düzeltmeler) ========================================================================= */ /* Yatay taşmayı tümden engelle */ html{overflow-x:hidden} @media (max-width:760px){ body{font-size:16px} /* Bölüm boşlukları mobilde biraz azalsın */ .section{padding:clamp(48px,12vw,80px) 0} .wrap{padding:0 18px} /* Dashboard mockup'ları mobilde sığsın (inline stilleri de ez) */ .dash{min-width:0} .dash-grid{grid-template-columns:1fr !important;min-height:0} .dash-side{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px; border-right:none;border-bottom:1px solid var(--tile-line);padding:12px;-webkit-overflow-scrolling:touch} .dash-side a{flex-shrink:0;white-space:nowrap;font-size:12px;padding:7px 11px} .dash-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px} .kpi{padding:12px} .kpi .v{font-size:19px} .kpi .l{font-size:10px} .dash-main{padding:16px} .dash-row{font-size:12px;gap:10px} .dash-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* Reklam/panel kartlarındaki 3'lü KPI ızgarası (Tailwind grid-cols-3) mobilde sıkışmasın */ .dash .grid.grid-cols-3{gap:8px} /* Hero sağ sütunundaki telefon alanı mobilde fazla yer kaplamasın; "son çalışmalar" rozeti sırayla en üste çıkabilsin diye flex sütun */ header .relative[style*="min-height:520px"]{min-height:auto !important;margin-top:8px;display:flex;flex-direction:column} /* Yüzen bildirim kartları taşmayı azaltsın */ .notif{width:auto !important;max-width:230px} .notif.absolute{position:static !important;margin:10px auto 0;display:inline-flex} /* "Yeni sipariş" / "Bugün +142 satış" bildirimleri mobilde gösterilmesin */ .hero-float-hide{display:none !important} /* "Son çalışmalar" rozeti mobilde görsel slaytının üstünde, sabit ve ortalı dursun */ .work-badge{position:static !important;width:auto;align-items:center;text-align:center;margin:0 auto 14px;order:-1} .work-badge-arrow{display:none} .work-badge .notif{display:inline-flex} /* Blog yazısı kenar çubuğu mobilde üstte sabitlenmesin */ .sidebar{position:static} /* SSS: mobilde 2 sütun yerine tek sütun, sırayla akış */ .faq-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} /* Uzun başlıklar kırılabilsin */ h1,h2,h3{overflow-wrap:anywhere} } /* Çok küçük ekranlar (≤400px) */ @media (max-width:400px){ .btn-lg{padding:15px 22px;font-size:15px} .display-xl{font-size:clamp(2.3rem,10vw,3rem)} }