/* ========================================================================== pixepi — arac.css · araç sayfası ve kategori sayfası bileşenleri -------------------------------------------------------------------------- Ortak sistem: fonts.css + site.css + site.js (+ bu dosya). Sayfa kendi marka rengini taşır: (GörselKüçült: #7c5cff · KargoLabel: #efa448 — ürün manifestoları esas alınır.) ========================================================================== */ /* --- 0. Kabuk: araç yüzeyi uçtan uca yayılır ----------------------------- */ /* app.php main'i .mtc-main ile kutular (max 1280 + 28px yan boşluk). Araç sayfası ise bantlarını ekran kenarına taşıyan tam genişlikte bir yüzeydir; içerik ritmini .wrap kurar. Kutuyu kaldırınca bölümler, güven şeridi ve renk bantları studio kabuğundaki gibi kenardan kenara akar. */ main.mtc-main-app{max-width:none;padding:0} /* Araç yüzeyinde ilk blok üst barın altından nefes alarak başlar (referans tasarımda kahraman üst bara yakın durur; nefes kahramanın içindedir). */ .page-top{padding:20px 0 0} @media (max-width:820px){.page-top{padding:14px 0 0}} /* --- Araç kahramanı (TASARIM STANDARDI) --------------------------------- 25 Eyl 2026 tasarım turu: kahraman kart değil — sayfa zeminine açık bir sahne. Sol kolon ürün sözü (eyebrow · h1 · lead); sağ kolon marka izi: piksel mozaiği (sunucuda üretilir), kanıt baloncuğu ve el yazısı notu. Metin daima dokunun üstünde kalır (z-index 1); dar ekranda süs geri çekilir, ürün sözü tam genişliğe yayılır. */ .tool-hero{ position:relative; padding:clamp(10px,1.2vw,18px) 0 clamp(26px,3.4vw,48px); min-height:clamp(280px,24vw,378px); } .tool-hero .hero-copy{position:relative;z-index:1;max-width:min(640px,56%)} .tool-hero .eyebrow{margin-bottom:0} .tool-hero .eyebrow:before{display:none} .tool-hero h1{ margin-top:13px;font-size:clamp(32px,4.35vw,52px);font-weight:800; line-height:1.07;letter-spacing:-.022em;text-wrap:balance; } .tool-hero h1 .accent{ color:transparent; /* Vurgu ürünün ana renginden türer: accent → açık ton → daha açık ton. */ background:linear-gradient(96deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 52%,#fff) 58%,color-mix(in srgb,var(--accent) 26%,#fff) 100%); background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; } .tool-hero .tool-tagline{margin-top:16px;max-width:540px;font-size:16.5px;line-height:1.62;color:var(--muted)} .tool-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} /* Süs katmanı: mozaik + baloncuk + el yazısı (hepsi dekoratif). */ .hero-art{position:absolute;inset:0;z-index:0;pointer-events:none} .hero-mosaic{position:absolute;inset:0;display:block} .hero-mosaic svg{display:block;width:100%;height:100%} .hero-tip{ position:absolute;top:10%;right:20%; display:inline-flex;align-items:center;gap:10px;max-width:300px; padding:11px 14px;border-radius:12px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(150deg,rgba(20,30,50,.88),rgba(10,17,29,.84)); box-shadow:0 20px 44px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .hero-tip-icon{ display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px; background:rgba(var(--accent-rgb),.16);color:var(--accent); } .hero-tip-icon svg{width:15px;height:15px} .hero-tip-copy{font-size:13px;line-height:1.36;color:#c3d0e7} .hero-note{ /* Not artık kahramanın dibine yaslanır: ok ucu alttaki tezgâhı işaret eder. Kahraman ile tezgâh arasındaki boşluk her genişlikte sabit 44px (güven şeridi 22px + tezgâh üst boşluğu 22px); ok kutusunun görünen ucu kutunun ~8px üstünde bittiği için -52px tam tezgâhın üst kenarına oturur. */ position:absolute;bottom:-52px;right:1%;width:max-content;max-width:200px; font-family:Caveat,Inter,cursive;font-size:clamp(22px,1.9vw,28px);font-weight:600; line-height:1.05;color:color-mix(in srgb,var(--accent) 62%,#fff);text-align:right; transform:rotate(-7deg);transform-origin:top right; text-shadow:0 2px 16px color-mix(in srgb,var(--accent) 30%,transparent); } .hero-note-text{display:block} .hero-note-arrow{display:block;width:92px;height:72px;margin:2px 0 0 4px;color:color-mix(in srgb,var(--accent) 70%,#fff);opacity:.9} @media (max-width:1180px){ .hero-tip{left:50%} .hero-note{right:0} } @media (max-width:900px){ .tool-hero .hero-copy{max-width:100%} .hero-tip,.hero-note{display:none} .hero-mosaic{opacity:.42;left:18%} } @media (max-width:640px){ .hero-mosaic{opacity:.3;left:6%} } /* --- Çalışma tezgâhı (tasarım demosu) ----------------------------------- */ /* Masaüstünde iki kolon: solda form (bırak + ayarlar + gönder), sağda sonuç paneli (yapışkan). Dar ekranda tek kolona iner. */ .workbench{ margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#0c141f; padding:clamp(18px,2.6vw,28px); display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(18px,2.6vw,30px);align-items:start; } .workbench > .mtc-workform{min-width:0} .workbench > .mtc-panel-output{position:sticky;top:calc(var(--header-h) + 18px)} @media (max-width:900px){ .workbench{grid-template-columns:1fr} .workbench > .mtc-panel-output{position:static} } .dropzone{ display:grid;place-items:center;gap:12px;text-align:center; padding:clamp(34px,5vw,54px) 24px; border:1.5px dashed #2f3f5d;border-radius:16px;background:#0a111d; transition:border-color .18s,background .18s; } .dropzone:hover{border-color:rgba(var(--accent-rgb),.6);background:#0b1322} .dz-ico{ display:grid;place-items:center;width:58px;height:58px;border-radius:18px; border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.13);color:var(--accent); } .dz-ico svg{width:26px;height:26px} .dropzone strong{font-size:17px;font-weight:600} .dropzone .dz-hint{font-size:13px;color:var(--muted-2)} /* Seçenekler paneldeki gibi tek kartta, ince ayraçla ayrılmış satırlarda durur (eski 3 sütunlu .opt-grid dağınıklığının yerine). Tek başına duran .opt (metin/girdi kutusu) kart görünümünü korur; yalnız .opt-list içindekiler satıra döner. */ .opt{border:1px solid var(--line);border-radius:12px;background:#0b1320;padding:14px 16px} .opt-list{margin-top:18px;padding:4px 18px;border:1px solid var(--line);border-radius:16px;background:#0b1320} .opt-list > .opt{padding:16px 0;border:0;border-radius:0;background:none} .opt-list > .opt + .opt{border-top:1px solid var(--line)} .opt label{display:block;margin-bottom:9px;font-size:12.5px;font-weight:600;color:var(--muted)} .opt .opt-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .opt .opt-choices .check{margin-bottom:0} .opt-range-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px} .opt-range-head label{margin:0} .opt-range-head output{margin:0;font-size:13px;font-weight:700;color:var(--accent)} .range{width:100%;height:26px;accent-color:var(--accent)} .opt select{width:100%;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#080f19;padding:0 10px;font-size:14px} .opt .opt-hint{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--muted-2)} .opt .opt-range-labels{display:flex;justify-content:space-between;gap:10px;margin-top:2px;font-size:12px;color:var(--muted-2)} .opt .num{width:100%;height:38px;border:1px solid var(--line-2);border-radius:9px;background:#080f19;padding:0 10px;font-size:14px;color:var(--ink)} .opt .num::placeholder{color:var(--muted-2)} .opt .switch{display:flex;align-items:center;gap:10px;margin-bottom:0;cursor:pointer;font-size:14px;color:var(--body)} .opt .switch input{position:absolute;opacity:0;width:1px;height:1px} .opt .switch-track{position:relative;width:40px;height:22px;flex:none;border-radius:999px;background:#283448;border:1px solid var(--line-2);transition:background .16s,border-color .16s} .opt .switch-track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#c6d2e6;transition:transform .16s,background .16s} .opt .switch input:checked + .switch-track{background:var(--accent);border-color:var(--accent)} .opt .switch input:checked + .switch-track:after{transform:translateX(18px);background:#08101c} .opt .switch input:focus-visible + .switch-track{box-shadow:var(--ring)} .workbench-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px} .workbench-actions .tool-note{margin:0;font-size:13px;color:var(--muted-2)} /* --- Araç ailesi sekmeleri (manifest.family) ----------------------------- */ /* Aynı işi yapan kardeş araçlar tezgâhın hemen üstünde sekme olarak durur; her sekme kardeşin kendi sayfasına gider. Yalnız aşırı yakın araçlar burada görünür (eski "İlgili araçlar" ızgarasının yerini aldı). Sekmenin rengi o aracın kendi ürün rengidir. */ .app-family{margin-top:24px} .app-family-tabs{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; padding:6px;border:1px solid var(--line);border-radius:16px;background:#0b1320; box-shadow:var(--shadow-card); } .app-family-tab{ display:inline-flex;align-items:center;gap:9px;min-height:40px; padding:0 15px;border:1px solid transparent;border-radius:11px; font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap; transition:background .16s,color .16s,border-color .16s; } a.app-family-tab:hover{color:var(--ink);background:#111c2c} .app-family-tab.is-current{ color:#fff;border-color:rgba(var(--accent-rgb),.42); background:rgba(var(--accent-rgb),.16); } .app-family-dot{ width:9px;height:9px;flex:none;border-radius:50%; background:var(--dot,var(--accent)); box-shadow:0 0 0 3px color-mix(in srgb,var(--dot,var(--accent)) 22%,transparent); } @media (max-width:600px){ .app-family-tab{padding:0 12px;font-size:13.5px} } /* --- Ürün imzası --------------------------------------------------------- */ .tool-signature{ margin-top:36px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;background:#0b1320; font-size:14px;color:var(--muted); } .tool-signature strong{color:var(--body);font-weight:600} .tool-signature img{height:22px;width:auto;opacity:.9} /* --- Kategori kahramanı + araç listesi ---------------------------------- */ .cat-hero{ position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-xl); padding:clamp(24px,3.4vw,36px); background: radial-gradient(520px 240px at 6% -20%,rgba(var(--accent-rgb),.18),transparent 70%), linear-gradient(140deg,#0d1624,#0a111d); } .cat-hero-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cat-hero .cat-badge{ display:grid;place-items:center;width:54px;height:54px;border-radius:15px; border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.14);color:var(--accent); } .cat-hero .cat-badge svg{width:26px;height:26px} .cat-hero h1{font-size:clamp(25px,3.4vw,38px);font-weight:800;line-height:1.12} .cat-hero .cat-lead{margin-top:12px;max-width:640px;font-size:16px;line-height:1.7;color:var(--muted)} .cat-facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .cat-fact{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:#0b1320;font-size:13px;color:var(--muted)} .cat-fact:before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent)} .cat-nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px} /* --- Küçük yardımcılar --------------------------------------------------- */ .anchor-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .anchor-list a{font-size:13.5px;color:color-mix(in srgb,var(--accent) 52%,#fff)} .anchor-list a:hover{color:color-mix(in srgb,var(--accent) 26%,#fff)} .tool-host{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-width:0;max-width:100%;font-size:12.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tool-host svg{width:13px;height:13px;flex:none} .tool-go{display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--line-2);border-radius:999px;background:#0d1521;color:#c9d6ec;transition:border-color .18s,background .18s,color .18s} .tool-go svg{width:16px;height:16px} .tool-card:hover .tool-go{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.16);color:#fff} /* --- Katlanır rehber: SEO metni DOM'da kalır, akış boğulmaz --------------- */ .guide-fold{margin-top:4px} .guide-fold > summary{ list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px; min-height:44px;padding:0 20px;border:1px solid var(--line-2);border-radius:999px; background:#0b1320;color:color-mix(in srgb,var(--accent) 52%,#fff);font-size:14px;font-weight:500; transition:border-color .18s,color .18s; } .guide-fold > summary::-webkit-details-marker{display:none} .guide-fold > summary:hover{border-color:rgba(var(--accent-rgb),.5);color:color-mix(in srgb,var(--accent) 26%,#fff)} .guide-fold > summary .icon{width:17px;height:17px;flex:none} .guide-fold[open] > summary{margin-bottom:28px} .guide-fold .prose{max-width:780px} /* --- Sonuç paneli: misafir yüzeyinde pp diline çekilir ------------------- */ /* tool.php'nin sonuç iskeleti core panel sınıflarını kullanır (JS yalnızca data-* kancalarına bağlıdır). Burada o sınıflar pp token'larıyla yeniden giydirilir; böylece tezgâhın iki kolonu tek bir tasarım dilinde okunur. */ .workbench .mtc-panel{ border:1px solid var(--line);border-radius:16px;background:#0b1320; min-height:0;overflow:hidden;box-shadow:var(--shadow-card); } .workbench .mtc-panel-output{min-height:0} .workbench .mtc-panel-head{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:15px 20px;border-bottom:1px solid var(--line); } .workbench .mtc-panel-head strong{font-size:15px;font-weight:600;color:var(--ink)} .workbench .mtc-step{ display:grid;place-items:center;width:26px;height:26px;border-radius:8px; border:1px solid rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.14); color:var(--accent);font-size:12.5px;font-weight:700; } .workbench .tiny-secure{color:var(--muted-2);font-size:12.5px} .workbench .mtc-panel-body{padding:22px} .workbench .mtc-result-state{min-height:300px;gap:10px} .workbench .mtc-result-state strong{font-size:15px;color:var(--ink)} .workbench .mtc-result-state p{color:var(--muted)} .workbench .mtc-result-icon{ display:grid;place-items:center;width:58px;height:58px;border-radius:16px; background:rgba(var(--accent-rgb),.12);color:var(--accent); } .workbench .mtc-result-icon .icon{width:24px;height:24px} .workbench .mtc-result-icon.is-ok{background:rgba(107,213,155,.14);color:var(--ok)} .workbench .mtc-result-icon.is-error{background:rgba(239,108,114,.14);color:var(--danger)} .workbench .mtc-result-icon.is-warn{background:rgba(255,183,3,.14);color:var(--warn)} .workbench .mtc-panel .btn{margin-top:12px;border-radius:12px} .workbench .mtc-progress-bar span{background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.5))} .workbench .mtc-spinner{border-top-color:var(--accent)} /* Toplu işlem notu: pp kart diline uyar. */ .workbench .mtc-batch-note{ display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:16px; border:1px solid var(--line-2);border-radius:12px;background:#0b1320;color:var(--muted); font-size:13.5px;line-height:1.55; } .workbench .mtc-batch-note .icon{color:var(--accent);flex:none} .workbench .mtc-batch-note .btn{margin-left:auto;flex:none} /* --- Ana düğme: araç yüzeyinde ürünün KENDİ rengini taşır ---------------- */ .page-top .btn-primary, .workbench .btn-primary{ background:linear-gradient(112deg,color-mix(in srgb,var(--accent) 92%,#000),color-mix(in srgb,var(--accent) 58%,#000)); color:#fff;box-shadow:inset 0 1px 2px rgba(255,255,255,.22),0 9px 25px rgba(var(--accent-rgb),.26); } /* Hover/active: accent'i sarıya AÇMAK yerine doygunlaştırıp hafifçe derinleştirir (amber/turuncu ürünlerde brightness sarıya kayıyordu). Parıltı accent renginden gelir; üstteki hafif kalkma ve ışık süzülmesi pp/base'den sürer. */ .page-top .btn-primary:hover, .workbench .btn-primary:hover{ background:linear-gradient(112deg,color-mix(in srgb,var(--accent) 92%,#000),color-mix(in srgb,var(--accent) 58%,#000)); filter:saturate(1.16) brightness(.98); box-shadow:inset 0 1px 2px rgba(255,255,255,.3),0 12px 30px rgba(var(--accent-rgb),.36); } .page-top .btn-primary:active, .workbench .btn-primary:active{filter:saturate(1.12) brightness(.92)} /* --- SSS: bölüm genişliğini kullanır ------------------------------------- */ .faq-list{max-width:none} /* ========================================================================== Ana sayfa kompozisyonu — showcase primitifleri (ICERIK-SISTEMI §3.4) -------------------------------------------------------------------------- `core/views/partials/showcase/*` parçalarının ortak görsel dili. Ürün kökü bu primitiflerle kurulur: akış · karşılaştırma · gerçekler · seçenekler · not. Yalnız araç yüzeyinde yüklenir (pp/tool.css) ve accent rengini üründen alır. Metin manifestten gelir; burada yalnız iskelet vardır. ========================================================================== */ /* --- Ortak ritim --------------------------------------------------------- */ .sc-section{padding:68px 0} .sc-section:first-of-type{padding-top:48px} .sc-section[id]{scroll-margin-top:90px} .sc-section .sec-head{margin-bottom:32px} /* Sahne (stage) `page-top` sarmalayıcısı içinde, hero ile tezgâh arasında basılır; içteki wrap'i ana wrap'e uydur (çift daralma olmasın). */ .page-top .sc-section > .wrap{width:100%} .sc-caption{ margin-top:22px;max-width:760px;color:var(--muted-2); font-size:13.5px;line-height:1.65; } .sc-glyph{display:block;width:22px;height:22px} /* --- Akış (flow) --------------------------------------------------------- */ .sc-flow{list-style:none;margin:0;padding:0} .sc-flow.is-h{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px; } .sc-flow.is-h .sc-flow-item{ position:relative;display:flex;flex-direction:column;gap:14px; padding:22px 20px;border:1px solid var(--line-2);border-radius:16px; background:#0b1320; } .sc-flow.is-h .sc-flow-item:not(:last-child):after{ content:"";position:absolute;top:50%;right:-18px;width:18px; border-top:2px dashed rgba(var(--accent-rgb),.42); } .sc-flow.is-v{display:grid;gap:14px;max-width:780px} .sc-flow.is-v .sc-flow-item{ display:flex;align-items:flex-start;gap:16px;padding:16px 18px; border:1px solid var(--line-2);border-radius:14px;background:#0b1320b8; } .sc-flow-node{ position:relative;display:grid;place-items:center;flex:none; width:48px;height:48px;border-radius:14px; border:1px solid rgba(var(--accent-rgb),.32); background:rgba(var(--accent-rgb),.1);color:var(--accent); } .sc-flow-no{ position:absolute;top:-7px;right:-7px;display:grid;place-items:center; width:20px;height:20px;border-radius:999px;background:var(--accent);color:#fff; font-size:11.5px;font-weight:700; } .sc-flow-copy{display:flex;flex-direction:column;gap:5px;min-width:0} .sc-flow-copy strong{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45} .sc-flow-copy span{font-size:13px;line-height:1.6;color:var(--muted-2)} .sc-flow.is-v .sc-flow-node{width:40px;height:40px;border-radius:12px} .sc-flow.is-v .sc-flow-copy strong{font-size:15px} .sc-flow.is-v .sc-flow-copy span{font-size:13.5px;color:var(--muted)} /* --- Karşılaştırma (compare) --------------------------------------------- */ .sc-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px} .sc-compare-card{ display:flex;flex-direction:column;gap:12px;padding:26px 24px 24px; border:1px solid var(--line-2);border-radius:18px;background:#0b1320; } .sc-compare-card.is-bad{border-color:rgba(239,108,114,.34)} .sc-compare-card.is-good{border-color:rgba(107,213,155,.34)} .sc-compare-badge{ align-self:flex-start;padding:3px 10px;border-radius:999px; font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .sc-compare-card.is-bad .sc-compare-badge{background:rgba(239,108,114,.14);color:var(--danger)} .sc-compare-card.is-good .sc-compare-badge{background:rgba(107,213,155,.14);color:var(--ok)} .sc-compare-visual{display:grid;place-items:center;width:52px;height:52px;border-radius:16px} .sc-compare-card.is-bad .sc-compare-visual{background:rgba(239,108,114,.12);color:var(--danger)} .sc-compare-card.is-good .sc-compare-visual{background:rgba(107,213,155,.12);color:var(--ok)} .sc-compare-visual .sc-glyph{width:26px;height:26px} .sc-compare-card h3{font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)} .sc-compare-card p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted)} /* --- Gerçekler (facts) ---------------------------------------------------- */ .sc-facts-section{ background:linear-gradient(180deg,#060c15,#08101c); border-top:1px solid #131c2c;border-bottom:1px solid #131c2c; } .sc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px} .sc-fact{ display:flex;flex-direction:column;gap:6px;padding:20px 18px; border:1px solid var(--line-2);border-radius:14px;background:#0b1320b8; } .sc-fact-icon{margin-bottom:4px;color:var(--accent)} .sc-fact strong{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .sc-fact span{font-size:13px;color:var(--muted)} .sc-fact small{font-size:12px;line-height:1.55;color:var(--muted-2)} /* --- Seçenekler (options) ------------------------------------------------- */ .sc-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} .sc-option{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; padding:22px 18px;border:1px solid var(--line-2);border-radius:16px;background:#0b1320; } .sc-option-visual{display:grid;place-items:center;min-height:72px;color:var(--accent)} .sc-option-visual .sc-glyph{width:30px;height:30px} .sc-option strong{font-size:14.5px;font-weight:600;color:var(--ink)} .sc-option span{font-size:12.5px;line-height:1.6;color:var(--muted-2)} /* Mini A4 diyagramı: `i` = vurgulanan alan (kırpma şablonları). */ .sc-region{ position:relative;display:block;width:52px;height:70px; border:1.5px solid var(--line-3);border-radius:6px;background:#0a111c; } .sc-region i{ position:absolute;border:1px solid rgba(var(--accent-rgb),.55); border-radius:3px;background:rgba(var(--accent-rgb),.26); } .sc-region.is-tl i{left:6%;top:6%;width:46%;height:30%} .sc-region.is-tr i{right:6%;top:6%;width:46%;height:30%} .sc-region.is-bl i{left:6%;bottom:6%;width:46%;height:30%} .sc-region.is-br i{right:6%;bottom:6%;width:46%;height:30%} .sc-region.is-top i{left:6%;top:6%;width:88%;height:44%} .sc-region.is-bottom i{left:6%;bottom:6%;width:88%;height:44%} .sc-region.is-full i{left:6%;top:6%;right:6%;bottom:6%} .sc-region.is-center i{left:22%;top:27%;width:56%;height:46%} /* --- Not (note): kısa bilgi + rehber CTA ---------------------------------- */ .sc-note{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);gap:40px;align-items:center} .sc-note-copy h2{margin-bottom:16px;font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.2} .sc-note-copy .prose p{font-size:15px;line-height:1.75;color:var(--muted)} .sc-note-aside{display:flex;justify-content:flex-end} .sc-note-cta{white-space:nowrap} /* --- Duyarlı -------------------------------------------------------------- */ @media (max-width:820px){ .sc-section{padding:48px 0} .sc-section:first-of-type{padding-top:34px} .sc-flow.is-h{grid-template-columns:1fr} .sc-flow.is-h .sc-flow-item:not(:last-child):after{display:none} .sc-note{grid-template-columns:1fr;gap:22px} .sc-note-aside{justify-content:flex-start} }