/* =========================================================== HG7 — ana stil dosyası Renkler logodan alınmıştır: mavi #004AAD · gradient #020206 → #312FBE · mürekkep #000000 Tema: =========================================================== */ :root{ --display:"Sora",system-ui,sans-serif; --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --veri:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --wrap:1220px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --grad:linear-gradient(120deg,#004AAD,#312FBE); /* canlı vurgu paleti — ikon ve kartlarda kullanılır */ --r1:#2F6FE0; --r1b:#1B4CB0; --r2:#6D4AE0; --r2b:#4B2CC0; --r3:#E0517E; --r3b:#BC2F5C; --r4:#F08A3C; --r4b:#D06A1C; --r5:#14A97F; --r5b:#0A8360; --r6:#0FA2C6; --r6b:#087C9A; --r7:#D6A017; --r7b:#B07E08; --r8:#E05A4A; --r8b:#BE3A2C; } [data-theme="dark"]{ --bg:#0B1122; --bg-2:#121B35; --bg-3:#1B2549; --head-bg:rgba(11,17,34,.86); --card:rgba(255,255,255,.04); --card-2:#121B35; --fg:#EEF1F8; --fg-2:#A9B2C6; --muted:#7F899F; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --brand:#2F6FE0; --brand-2:#4B49E0; --brand-fg:#7FA8FF; --on-brand:#FFFFFF; --gain:#3FD9A0; --contrast-bg:#EEF1F8; --contrast-fg:#080C18; --contrast-fg-2:#3B4560; --contrast-line:rgba(8,12,24,.14); --panel:#0A0F1E; --panel-fg:#DFE5F2; --panel-line:rgba(255,255,255,.10); --shadow:0 30px 70px -32px rgba(0,0,0,.92); --shadow-sm:0 12px 30px -18px rgba(0,0,0,.8); --golge-k:0 2px 6px rgba(0,0,0,.30), 0 14px 30px -16px rgba(0,0,0,.75); --golge-b:0 6px 16px rgba(0,0,0,.38), 0 30px 60px -24px rgba(0,0,0,.88); --input:rgba(255,255,255,.04); --glow:rgba(49,47,190,.34); } [data-theme="light"]{ --bg:#F4F6FB; --bg-2:#FFFFFF; --bg-3:#E9EDF7; --head-bg:rgba(244,246,251,.88); --card:#FFFFFF; --card-2:#FFFFFF; --fg:#080C18; --fg-2:#414C66; --muted:#6A748C; --line:rgba(8,12,24,.12); --line-2:rgba(8,12,24,.28); --brand:#004AAD; --brand-2:#312FBE; --brand-fg:#004AAD; --on-brand:#FFFFFF; --gain:#0B8A62; --contrast-bg:#080C18; --contrast-fg:#EEF1F8; --contrast-fg-2:#A9B2C6; --contrast-line:rgba(255,255,255,.13); --panel:#050912; --panel-fg:#DFE5F2; --panel-line:rgba(255,255,255,.10); --shadow:0 26px 60px -30px rgba(8,12,24,.38); --shadow-sm:0 12px 28px -18px rgba(8,12,24,.30); --golge-k:0 1px 2px rgba(12,20,44,.05), 0 8px 20px -10px rgba(12,20,44,.16); --golge-b:0 4px 12px rgba(12,20,44,.09), 0 26px 50px -20px rgba(12,20,44,.24); --input:#FFFFFF; --glow:rgba(0,74,173,.16); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--fg); font-family:var(--body);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; transition:background .3s ease,color .3s ease; } img{max-width:100%;display:block} a{color:inherit} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .hidden{display:none!important} h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.08;margin:0} h1{font-size:clamp(34px,4.8vw,58px);font-weight:800} h2{font-size:clamp(27px,3.4vw,42px);font-weight:700} h3{font-size:19.5px;font-weight:600;letter-spacing:-.02em} h4{font-size:16px;font-weight:600;letter-spacing:-.01em} p{margin:0 0 16px} .lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--fg-2);max-width:58ch} .eyebrow{ font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--brand-fg);margin:0 0 18px;display:flex;align-items:center;gap:10px;font-weight:600; } .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7} .eyebrow.orta{justify-content:center} .ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ic-lg{width:22px;height:22px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body); font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;text-decoration:none;white-space:nowrap; border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .2s,border-color .2s,background .2s,color .2s; } .btn:hover{transform:translateY(-1px)} .btn-solid{background:var(--grad);color:#fff;box-shadow:0 10px 26px -12px rgba(49,47,190,.75)} .btn-solid:hover{box-shadow:0 16px 34px -12px rgba(49,47,190,.9)} .btn-ghost{border-color:var(--line);color:var(--fg)} .btn-ghost:hover{border-color:var(--line-2)} .btn-light{background:var(--bg-2);color:var(--fg);border-color:var(--line)} .btn-sm{padding:10px 16px;font-size:14px} /* ================= header ================= */ .site-head{position:sticky;top:0;z-index:80;background:var(--head-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .head-in{display:flex;align-items:center;gap:14px;height:68px;position:relative} .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none} .logo-mark{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-.06em;line-height:1;white-space:nowrap} .logo-mark i{font-style:normal;color:var(--brand-fg)} .logo-alt{ font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap; color:#fff;background:linear-gradient(90deg,#020206,#312FBE);padding:3px 7px;border-radius:5px; } .nav{display:none;align-items:center;gap:2px;margin-left:10px} @media(min-width:1080px){.nav{display:flex}} .nav > li{list-style:none;position:static;flex:none} .nav-link{ display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:10px;white-space:nowrap; font-size:14.8px;font-weight:500;color:var(--fg-2);text-decoration:none;transition:color .2s,background .2s; } .nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--fg);background:var(--card)} .nav-link .ok{width:12px;height:12px;stroke-width:2.2;transition:transform .2s} .nav > li:hover .nav-link .ok{transform:rotate(180deg)} .head-tools{display:flex;align-items:center;gap:9px;margin-left:auto;flex:none} .tel-head{display:none;align-items:center;gap:7px;font-size:14.2px;font-weight:500;color:var(--fg-2);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums} .tel-head:hover{color:var(--brand-fg)} @media(min-width:1360px){.tel-head{display:inline-flex}} .ikon-btn{ width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg); display:grid;place-items:center;cursor:pointer;transition:border-color .2s,color .2s; } .ikon-btn:hover{border-color:var(--line-2);color:var(--brand-fg)} .ikon-btn .ico-sun{display:none} [data-theme="dark"] .ikon-btn .ico-sun{display:block} [data-theme="dark"] .ikon-btn .ico-moon{display:none} .head-cta{display:none} @media(min-width:680px){.head-cta{display:inline-flex;padding:11px 18px;font-size:14.3px}} .menu-btn{display:grid} @media(min-width:1080px){.menu-btn{display:none}} /* ================= mega menü ================= */ .mega{ position:absolute;top:calc(100% + 10px);left:0;right:0;transform:translateY(-8px); background:var(--bg-2);border:1px solid var(--line); border-radius:var(--r-xl);box-shadow:var(--shadow);padding:22px; opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s; } .nav > li:hover .mega,.nav > li:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)} .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .mega-grid{display:grid;grid-template-columns:repeat(3,1fr) 238px;gap:20px} .mega-col{display:grid;gap:18px;align-content:start} .kat{display:block;text-decoration:none} .kat-bas{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)} .kat-ikon{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; background:var(--grad);color:#fff; } .kat-ikon .ic{width:15px;height:15px;stroke:#fff} .kat-ad{font-family:var(--display);font-weight:600;font-size:14.6px;letter-spacing:-.02em;color:var(--fg);text-decoration:none;line-height:1.25} .kat-ad small{display:block;font-family:var(--body);font-weight:400;font-size:11px;color:var(--muted);letter-spacing:0;margin-top:2px;line-height:1.3} .alt-liste{list-style:none;margin:0;padding:0;display:grid;gap:1px} .alt-liste a{ display:flex;align-items:center;gap:9px;padding:5.5px 8px;border-radius:8px;text-decoration:none; font-size:13.4px;line-height:1.35;color:var(--fg-2);transition:background .18s,color .18s; } .alt-liste a:hover{background:var(--card);color:var(--fg)} .alt-liste a .ic{width:15px;height:15px;color:var(--brand-fg);opacity:.85} .alt-liste a span{min-width:0} .mega-promo{ background:var(--grad);color:#fff;border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:10px; } .mega-promo h4{font-size:17px;color:#fff} .mega-promo p{font-size:12.8px;line-height:1.5;color:rgba(255,255,255,.82);margin:0} .mega-promo .rakam{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1} .mega-promo .btn{background:#fff;color:#08132B;margin-top:auto;box-shadow:none} /* ================= mobil çekmece ================= */ .drawer{position:fixed;inset:0;z-index:90;display:none} .drawer.acik{display:block} .drawer-arka{position:absolute;inset:0;background:rgba(4,6,12,.6);backdrop-filter:blur(3px)} .drawer-panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,90vw);background:var(--bg-2); border-left:1px solid var(--line);padding:20px;overflow-y:auto; } .drawer-bas{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .acc{list-style:none;margin:0;padding:0} .acc > li{border-bottom:1px solid var(--line)} .acc-bas{ width:100%;background:none;border:0;color:var(--fg);font-family:var(--body);font-size:16.5px;font-weight:600; padding:15px 2px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left;text-decoration:none; } .acc-govde{display:none;padding:0 0 14px} .acc-govde.acik{display:block} .acc-govde .kat-bas{margin-top:8px} .drawer-tel{display:grid;gap:8px;margin-top:22px} .drawer-tel a{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14.5px;text-decoration:none;color:var(--fg-2)} /* ================= hero ================= */ .hero{padding:70px 0 44px;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:auto -12% -62% 34%;height:540px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none} .hero-in{position:relative;z-index:1;display:grid;gap:50px;align-items:center} @media(min-width:1020px){.hero-in{grid-template-columns:1.04fr .96fr;gap:54px}} .hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} [data-theme="dark"] .hero h1 em{background:linear-gradient(120deg,#5A93FF,#8B7BFF);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero-not{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:22px} /* açık artırma modülü */ .serp{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)} .serp-bar{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:11px 16px;font-family:var(--veri);font-size:14px} .serp-bar .ic{opacity:.5} #q{white-space:nowrap;overflow:hidden} .caret{display:inline-block;width:1.5px;height:15px;background:var(--brand-fg);vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} .canli{margin-left:auto;font-size:11px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;gap:6px} .canli::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gain);animation:nabiz 1.6s ease-in-out infinite} @keyframes nabiz{0%,100%{opacity:.35}50%{opacity:1}} .serp-rows{margin-top:14px;display:grid;gap:8px} .srow{border:1px solid transparent;border-radius:var(--r-md);padding:12px 14px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s} .srow.in{opacity:1;transform:none} .srow-ad{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 9%,transparent)} .chip{font-family:var(--veri);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--brand);color:var(--brand-fg);border-radius:5px;padding:1px 6px;margin-right:8px} .srow-t{font-size:15.5px;font-weight:600} .srow-u{font-family:var(--veri);font-size:11.5px;color:var(--muted);margin-top:4px} .srow-dim .srow-t{color:var(--muted);font-weight:500} .serp-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} .serp-foot > div{background:var(--card-2);padding:12px 14px} .serp-foot b{display:block;font-family:var(--veri);font-size:17px;color:var(--gain);font-weight:500} .serp-foot small{font-family:var(--veri);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* ================= sayı şeridi ================= */ .sayilar{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sayilar-in{display:grid;grid-template-columns:repeat(2,1fr);padding:0} @media(min-width:860px){.sayilar-in{grid-template-columns:repeat(4,1fr)}} .sayi{padding:26px 24px;border-right:1px solid var(--line);border-top:1px solid var(--line)} .sayi:nth-child(-n+2){border-top:0} @media(min-width:860px){.sayi{border-top:0}} .sayi:last-child{border-right:0} .sayi b{display:block;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em} .sayi small{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* ================= bölümler ================= */ section{padding:88px 0} .sec-bas{max-width:66ch;margin-bottom:42px} .sec-bas.orta{margin-left:auto;margin-right:auto;text-align:center} .sec-bas.orta .eyebrow{justify-content:center} .grid{display:grid;gap:18px} @media(min-width:720px){.g2{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}} @media(min-width:900px){.g4{grid-template-columns:repeat(4,1fr)}} /* hizmet kartı — görselli */ .hkart{ display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--card);overflow:hidden;text-decoration:none; transition:border-color .25s,transform .25s,box-shadow .25s; } .hkart:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow)} .hkart-gorsel{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)} .hkart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .hkart:hover .hkart-gorsel img{transform:scale(1.05)} .hkart-rozet{ position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px; background:rgba(6,8,15,.72);backdrop-filter:blur(6px);color:#fff;border-radius:999px;padding:6px 12px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; } .hkart-rozet .ic{width:13px;height:13px;stroke:#fff} .hkart-govde{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1} .hkart-govde p{color:var(--fg-2);font-size:15px;margin:0} .hkart-alt{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--brand-fg)} .hkart-sayi{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em} /* sade kart */ .kart{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;background:var(--card);transition:border-color .25s,transform .25s,box-shadow .25s} .kart:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-sm)} .kart p{color:var(--fg-2);font-size:15.2px;margin:0} /* ikon çipi — hangi kartın içinde olursa olsun aynı davranır */ .kart-ikon{width:42px;height:42px;border-radius:12px;color:#fff;display:grid;place-items:center; flex:none;justify-self:start;margin-bottom:16px} .kart-ikon .ic{width:20px;height:20px;stroke:#fff;fill:none} .kart h3{margin-bottom:9px} /* ================= neden hg7 (kontrast bölüm) ================= */ .neden{background:var(--contrast-bg);color:var(--contrast-fg)} .neden .eyebrow{color:#7FA8FF} .neden .lead{color:var(--contrast-fg-2)} .neden-grid{display:grid;gap:44px;align-items:start;margin-top:8px} @media(min-width:1000px){.neden-grid{grid-template-columns:.92fr 1.08fr;gap:56px}} .neden-liste{display:grid;gap:14px} .neden-item{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px;border:1px solid var(--contrast-line);border-radius:var(--r-lg);background:rgba(255,255,255,.03)} .neden-item .kart-ikon{width:40px;height:40px;border-radius:11px;margin:0} .neden-item .kart-ikon .ic{stroke:#fff;width:19px;height:19px} .neden-item h4{color:var(--contrast-fg);margin-bottom:5px} .neden-item p{color:var(--contrast-fg-2);font-size:14.6px;margin:0} /* panel/log görünümü */ .panel-kutu{background:var(--panel);border:1px solid var(--contrast-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .panel-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--panel-line);font-family:var(--veri);font-size:11.5px;color:#8B95AC;letter-spacing:.08em} .panel-bar i{width:9px;height:9px;border-radius:50%;background:#2B3550;display:block} .panel-bar i:first-child{background:#3FD9A0} .panel-govde{padding:18px;font-family:var(--veri);font-size:13px;color:#98A2BA} .satir{display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed var(--panel-line)} .satir:last-child{border-bottom:0} .satir .k{color:var(--panel-fg);min-width:118px} .satir .d{margin-left:auto;color:#7FA8FF} .satir .d.ok{color:#3FD9A0} /* ================= süreç ================= */ .adimlar{counter-reset:s;border-top:1px solid var(--line)} .adim{counter-increment:s;display:grid;gap:6px 26px;padding:26px 0;border-bottom:1px solid var(--line);grid-template-columns:auto 1fr;align-items:start} @media(min-width:820px){.adim{grid-template-columns:auto 250px 1fr;align-items:baseline}} .adim::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--brand-fg);letter-spacing:.1em;padding-top:6px} .adim p{margin:0;color:var(--fg-2);font-size:15.4px} /* ================= sektörler ================= */ .sektor-grup{margin-bottom:30px} .sektor-grup h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:400} .rozetler{display:flex;flex-wrap:wrap;gap:9px} .rozet{ display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px; padding:9px 16px;font-size:14.5px;color:var(--fg-2);text-decoration:none;background:var(--card); transition:border-color .2s,color .2s,transform .2s; } .rozet:hover{border-color:var(--brand);color:var(--fg);transform:translateY(-2px)} .rozet .ic{width:14px;height:14px;color:var(--brand-fg)} /* ================= sss ================= */ .sss-duzen{display:grid;gap:34px;align-items:start} @media(min-width:980px){.sss-duzen{grid-template-columns:270px 1fr;gap:48px}} .sss-yan{position:sticky;top:96px;display:grid;gap:8px} .sss-ara{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--card);margin-bottom:8px} .sss-ara input{border:0;background:transparent;color:var(--fg);font-family:var(--body);font-size:15px;width:100%;outline:none} .sss-yan a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;text-decoration:none;color:var(--fg-2);font-size:14.8px;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s} .sss-yan a:hover,.sss-yan a.aktif{background:var(--card);color:var(--fg);border-color:var(--line)} .sss-yan a .ic{color:var(--brand-fg)} .sss-blok{margin-bottom:40px} .sss-blok > h3{display:flex;align-items:center;gap:11px;margin-bottom:16px;font-size:21px} .sss-blok > h3 .kart-ikon{width:34px;height:34px;border-radius:10px;margin:0} .sss-blok > h3 .kart-ikon .ic{stroke:#fff;width:16px;height:16px} .soru{border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);margin-bottom:10px;overflow:hidden;transition:border-color .2s} .soru[open]{border-color:var(--brand)} .soru summary{ font-family:var(--display);font-weight:600;font-size:16.6px;letter-spacing:-.01em;cursor:pointer;list-style:none; display:flex;gap:14px;align-items:center;padding:17px 20px; } .soru summary::-webkit-details-marker{display:none} .soru summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--brand-fg);border-bottom:2px solid var(--brand-fg);transform:rotate(45deg);transition:transform .2s;flex:none} .soru[open] summary::after{transform:rotate(-135deg)} .soru .cevap{padding:0 20px 18px;color:var(--fg-2);font-size:15.2px} .soru .cevap p:last-child{margin:0} /* ================= içerik + yan sütun (detay sayfaları) ================= */ .detay{display:grid;gap:40px;align-items:start} @media(min-width:1000px){.detay{grid-template-columns:minmax(0,1fr) 330px;gap:52px}} @media(min-width:1000px){.detay.sol-yan{grid-template-columns:330px minmax(0,1fr)}} @media(min-width:1000px){.detay.sol-yan .yan{order:-1}} .icerik{max-width:none} .icerik h2{font-size:clamp(23px,2.4vw,31px);margin:38px 0 14px} .icerik h3{font-size:20px;margin:28px 0 10px} .icerik p{color:var(--fg-2);font-size:16.6px} .icerik ul{color:var(--fg-2);padding-left:20px;margin:0 0 18px} .icerik li{margin-bottom:8px} .icerik strong{color:var(--fg)} .icerik > img,.icerik figure img{border-radius:var(--r-lg);border:1px solid var(--line);margin:24px 0} .alinti{border-left:3px solid var(--brand);background:var(--card);padding:18px 22px;border-radius:0 var(--r-md) var(--r-md) 0;margin:24px 0;color:var(--fg);font-size:17px} .yan{display:grid;gap:18px} @media(min-width:1000px){.yan{position:sticky;top:96px;align-self:start}} .yan-kutu{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:20px} .yan-kutu > h4{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:400} .yan-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px} .yan-liste a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--fg-2);font-size:14.6px;transition:background .2s,color .2s} .yan-liste a:hover{background:var(--bg-3);color:var(--fg)} .yan-liste a .ic{width:15px;height:15px;color:var(--brand-fg)} .yan-liste a.aktif{background:var(--bg-3);color:var(--fg);font-weight:600} .yazar{display:flex;gap:14px;align-items:center} .yazar img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line)} .yazar b{display:block;font-family:var(--display);font-size:15.5px} .yazar span{font-size:13px;color:var(--muted)} .yan-cta{background:var(--grad);color:#fff;border:0} .yan-cta h4{color:rgba(255,255,255,.8)} .yan-cta p{color:rgba(255,255,255,.88);font-size:14.6px} .yan-cta .btn{background:#fff;color:#08132B;width:100%;box-shadow:none} .yan-tel{display:grid;gap:8px} .yan-tel a{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--mono);font-size:14.4px;color:var(--fg-2);padding:9px 10px;border-radius:10px} .yan-tel a:hover{background:var(--bg-3);color:var(--fg)} /* kırıntı */ .kirinti{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;padding:22px 0 0} .kirinti a{text-decoration:none} .kirinti a:hover{color:var(--brand-fg)} /* sayfa başlığı */ .sayfa-bas{padding:52px 0 34px;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .sayfa-bas::after{content:"";position:absolute;inset:auto -20% -80% 40%;height:420px;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none} .sayfa-bas .wrap{position:relative;z-index:1} .sayfa-bas h1{max-width:22ch} .sayfa-bas .lead{margin-top:16px} /* ================= hakkımızda ================= */ .kurucu{display:grid;gap:40px;align-items:center} @media(min-width:980px){.kurucu{grid-template-columns:.85fr 1.15fr;gap:52px}} .kurucu-gorsel{position:relative} .kurucu-gorsel img{border-radius:var(--r-xl);border:1px solid var(--line);width:100%;box-shadow:var(--shadow)} .kurucu-etiket{ position:absolute;right:-14px;bottom:24px;background:var(--bg-2);border:1px solid var(--line); border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--shadow-sm);display:grid;gap:2px; } .kurucu-etiket b{font-family:var(--display);font-size:15.5px} .kurucu-etiket small{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em} .vm{display:grid;gap:18px} @media(min-width:760px){.vm{grid-template-columns:repeat(2,1fr)}} .vm-kart{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--card);position:relative;overflow:hidden} .vm-kart::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:var(--grad);opacity:.10} .vm-kart .kart-ikon{margin-bottom:16px} .vm-kart p{color:var(--fg-2);font-size:15.4px;margin:0} .deger{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)} .deger:last-child{border-bottom:0} .deger .no{font-family:var(--mono);font-size:12px;color:var(--brand-fg);padding-top:4px} .deger p{margin:4px 0 0;color:var(--fg-2);font-size:15.2px} /* ================= cta bandı ================= */ .cta-band{position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--r-xl);padding:clamp(34px,5vw,58px);display:grid;gap:26px;align-items:center} @media(min-width:900px){.cta-band{grid-template-columns:1.25fr .75fr;gap:44px}} .cta-band::before{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.09)} .cta-band::after{content:"";position:absolute;left:-40px;bottom:-120px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06)} .cta-band > *{position:relative;z-index:1} .cta-band h2{color:#fff;max-width:20ch} .cta-band p{color:rgba(255,255,255,.86);margin:14px 0 0;max-width:46ch} .cta-btns{display:flex;flex-wrap:wrap;gap:12px} .cta-band .btn-beyaz{background:#fff;color:#08132B;box-shadow:none} .cta-band .btn-cizgi{border-color:rgba(255,255,255,.45);color:#fff} .cta-band .btn-cizgi:hover{border-color:#fff;background:rgba(255,255,255,.10)} /* ================= iletişim ================= */ .ilt-duzen{display:grid;gap:34px;align-items:start} @media(min-width:1000px){.ilt-duzen{grid-template-columns:1fr 1.08fr;gap:42px}} .ilt-kartlar{display:grid;gap:14px} @media(min-width:600px){.ilt-kartlar{grid-template-columns:repeat(2,1fr)}} .ilt-kart{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--card);display:grid;gap:8px;text-decoration:none;transition:border-color .2s,transform .2s} .ilt-kart:hover{border-color:var(--brand);transform:translateY(-3px)} .ilt-kart .kart-ikon{width:44px;height:44px;border-radius:13px;margin-bottom:10px} .ilt-kart .kart-ikon .ic{width:20px;height:20px} .ilt-kart small{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .ilt-kart b{font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.02em;word-break:break-word;font-variant-numeric:tabular-nums} .ilt-kart span{font-size:13.6px;color:var(--fg-2)} .form-kutu{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);padding:clamp(26px,3vw,38px);box-shadow:var(--shadow-sm)} .form{display:grid;gap:17px} @media(min-width:640px){.form .yarim{grid-template-columns:repeat(2,1fr);display:grid;gap:17px}} .alan{display:grid;gap:6px} .alan label{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .alan input,.alan select,.alan textarea{ background:var(--input);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px; color:var(--fg);font-family:var(--body);font-size:16px;width:100%;line-height:1.4; } .alan textarea{resize:vertical;min-height:110px} .alan select{ appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;text-overflow:ellipsis; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23768099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;background-size:14px; } .alan input:focus,.alan select:focus,.alan textarea:focus{outline:2px solid var(--brand);outline-offset:1px} .onay{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)} .onay a{color:var(--fg-2)} .harita{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3); height:360px;display:grid;place-items:center;color:var(--muted);font-size:13.5px;text-align:center;padding:20px} .harita iframe,.harita img{width:100%;height:100%;border:0;display:block} .harita-dolu{padding:0;display:block} @media(max-width:700px){.harita{height:280px}} .calisma{display:grid;gap:10px} .calisma div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.6px} .calisma div:last-child{border-bottom:0} .calisma span{color:var(--muted);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums} /* ================= blog ================= */ .yazi-kart{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card);text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s} .yazi-kart:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:var(--shadow-sm)} .yazi-kart .gor{aspect-ratio:16/10;background:var(--bg-3);overflow:hidden} .yazi-kart .gor img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .yazi-kart:hover .gor img{transform:scale(1.05)} .yazi-kart .govde{padding:20px;display:grid;gap:9px} .yazi-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em;display:flex;gap:10px;flex-wrap:wrap} .yazi-kart p{color:var(--fg-2);font-size:14.8px;margin:0} /* ================= footer ================= */ footer{border-top:1px solid var(--line);padding:50px 0 28px;font-size:14.4px;color:var(--muted);background:var(--bg-2)} .foot-ust{display:grid;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--line)} @media(min-width:900px){.foot-ust{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}} footer h4{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin:0 0 13px;font-weight:600} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} footer a{text-decoration:none;transition:color .2s} footer a:hover{color:var(--fg)} .foot-tel{display:grid;gap:8px;margin-top:14px} .foot-tel a{display:flex;align-items:center;gap:9px;font-size:14.8px;font-weight:500;color:var(--fg-2);font-variant-numeric:tabular-nums} .foot-tel a .ic{color:var(--brand-fg)} .foot-alt{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:13px} .foot-alt .sol{display:flex;flex-wrap:wrap;gap:10px} .gorun{opacity:0;transform:translateY(14px)} .gorun.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease} :focus-visible{outline:2px solid var(--brand-fg);outline-offset:3px} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .gorun,.srow{opacity:1;transform:none} } /* ================= uyarı kutuları ================= */ .uyari{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-md);padding:16px 18px;margin-bottom:18px;font-size:15px} .uyari .ic{flex:none;margin-top:3px} .uyari b{font-family:var(--display);font-weight:600} .uyari p{margin:0;font-size:14.5px} .uyari-ok{background:color-mix(in srgb,var(--gain) 14%,transparent);border:1px solid var(--gain);color:var(--fg)} .uyari-ok .ic{color:var(--gain)} .uyari-hata{background:rgba(226,76,76,.12);border:1px solid rgba(226,76,76,.55);color:var(--fg)} .uyari-hata .ic{color:#E24C4C} .uyari-bilgi{background:var(--card);border:1px solid var(--line);color:var(--fg-2)} /* ================= whatsapp düğmesi ================= */ .wa-buton{ position:fixed;right:18px;bottom:18px;z-index:70;width:54px;height:54px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(37,211,102,.7); transition:transform .2s; } .wa-buton:hover{transform:scale(1.06)} .wa-buton .ic{stroke:#fff;stroke-width:1.8} @media(max-width:640px){.wa-buton{right:14px;bottom:14px;width:50px;height:50px}} /* içerik içindeki lead sınıfı (panelden gelen HTML) */ .icerik .lead{color:var(--fg);font-size:19px;font-weight:500} /* ================= hamzagenel.com kredisi ================= */ .hg-kredi{display:inline-flex;align-items:center;color:var(--muted)} .hg-kredi svg{fill:currentColor} /* ===================================================================== RENK SINIFLARI — bir öğeye rk1..rk8 verilince içindeki ikon çipi ve vurgular o rengi alır. PHP tarafında rk() fonksiyonu üretir. ===================================================================== */ .rk1{--rk-a:var(--r1);--rk-b:var(--r1b)} .rk2{--rk-a:var(--r2);--rk-b:var(--r2b)} .rk3{--rk-a:var(--r3);--rk-b:var(--r3b)} .rk4{--rk-a:var(--r4);--rk-b:var(--r4b)} .rk5{--rk-a:var(--r5);--rk-b:var(--r5b)} .rk6{--rk-a:var(--r6);--rk-b:var(--r6b)} .rk7{--rk-a:var(--r7);--rk-b:var(--r7b)} .rk8{--rk-a:var(--r8);--rk-b:var(--r8b)} .kart-ikon,.kat-ikon,.sk-ikon,.p-ozet-ikon{ background:linear-gradient(135deg,var(--rk-a,#004AAD),var(--rk-b,#312FBE)); } .kart-ikon,.sk-ikon{box-shadow:0 8px 18px -10px var(--rk-a,#004AAD)} .hkart:hover{border-color:var(--rk-a,var(--brand))} .kart:hover{border-color:var(--rk-a,var(--brand))} /* ===================================================================== GÖLGELİ KART GÖRÜNÜMÜ ===================================================================== */ .kart,.hkart,.yazi-kart,.ilt-kart,.yan-kutu,.form-kutu,.vm-kart,.soru,.sk,.serp,.panel-kutu{ box-shadow:var(--golge-k); } .kart:hover,.hkart:hover,.yazi-kart:hover,.ilt-kart:hover,.sk:hover{box-shadow:var(--golge-b)} .soru[open]{box-shadow:var(--golge-b)} .site-head{box-shadow:0 6px 24px -20px rgba(10,16,40,.65)} .mega{box-shadow:var(--golge-b)} .cta-band,.mega-promo,.yan-cta{box-shadow:0 18px 40px -22px rgba(49,47,190,.75)} /* ===================================================================== SEKTÖR KARTLARI — etiket yerine renkli kart ===================================================================== */ .sektor-izgara{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} @media(min-width:720px){.sektor-izgara{grid-template-columns:repeat(3,1fr)}} @media(min-width:1040px){.sektor-izgara{grid-template-columns:repeat(4,1fr)}} .sk{ position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 18px; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); text-decoration:none;overflow:hidden;transition:transform .22s ease,border-color .22s,box-shadow .22s; } .sk::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--rk-a),var(--rk-b));opacity:.9} .sk::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%; background:var(--rk-a);opacity:.07;transition:opacity .22s,transform .22s} .sk:hover{transform:translateY(-4px);border-color:var(--rk-a)} .sk:hover::after{opacity:.14;transform:scale(1.15)} .sk-ikon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;position:relative;z-index:1} .sk-ikon .ic{width:21px;height:21px;stroke:#fff} .sk b{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--fg); position:relative;z-index:1;line-height:1.3} .sk small{font-size:12.5px;color:var(--muted);position:relative;z-index:1} .sk-ok{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600; color:var(--rk-a);position:relative;z-index:1;opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s} .sk:hover .sk-ok{opacity:1;transform:none} /* ===================================================================== SSS — kategori süzme ===================================================================== */ .sss-yan a{cursor:pointer;border:1px solid transparent} .sss-yan a.aktif{background:linear-gradient(135deg,var(--rk-a,#004AAD),var(--rk-b,#312FBE)); color:#fff;border-color:transparent;font-weight:600} .sss-yan a.aktif .ic{color:#fff} .sss-yan .say{margin-left:auto;font-size:12px;opacity:.65} .sss-bos{padding:40px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-lg)} /* ===================================================================== DEĞER / SÜREÇ KARTLARI (hakkımızda) ===================================================================== */ .deger-izgara{display:grid;gap:16px} @media(min-width:640px){.deger-izgara{grid-template-columns:repeat(2,1fr)}} .deger-kart{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); padding:24px;box-shadow:var(--golge-k);transition:transform .22s,border-color .22s,box-shadow .22s;overflow:hidden} .deger-kart:hover{transform:translateY(-3px);border-color:var(--rk-a);box-shadow:var(--golge-b)} .deger-kart::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%; background:var(--rk-a);opacity:.07} .deger-kart h3{margin-bottom:8px;position:relative;z-index:1} .deger-kart p{color:var(--fg-2);font-size:15px;margin:0;position:relative;z-index:1} .deger-kart .kart-ikon{margin-bottom:14px;position:relative;z-index:1} .surec-izgara{display:grid;gap:16px} @media(min-width:640px){.surec-izgara{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.surec-izgara{grid-template-columns:repeat(4,1fr)}} .surec-kart{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); padding:24px 22px;box-shadow:var(--golge-k);overflow:hidden;transition:transform .22s,box-shadow .22s} .surec-kart:hover{transform:translateY(-3px);box-shadow:var(--golge-b)} .surec-no{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.05em;line-height:1; background:linear-gradient(135deg,var(--rk-a),var(--rk-b));-webkit-background-clip:text;background-clip:text; color:transparent;margin-bottom:12px;display:block} .surec-kart h3{margin-bottom:8px} .surec-kart p{color:var(--fg-2);font-size:14.8px;margin:0} .surec-kart::before{content:"";position:absolute;left:0;top:0;right:0;height:3px; background:linear-gradient(90deg,var(--rk-a),var(--rk-b))} /* ===================================================================== MAVİ KUTULARDAKİ YAZI RENKLERİ ===================================================================== */ .yan-cta .yan-tel a{color:rgba(255,255,255,.92)} .yan-cta .yan-tel a:hover{background:rgba(255,255,255,.14);color:#fff} .yan-cta .yan-tel a .ic{color:rgba(255,255,255,.8)} .mega-promo p,.mega-promo .rakam{color:#fff} /* ===================================================================== GOOGLE PARTNER ROZETİ Rozet açık zemin için tasarlandığı için beyaz bir kap içine alınır. ===================================================================== */ .partner{display:inline-flex;align-items:center;justify-content:center;background:#fff; border-radius:14px;padding:12px 16px;box-shadow:var(--golge-k);border:1px solid rgba(8,12,24,.08); transition:transform .2s ease,box-shadow .2s} .partner:hover{transform:translateY(-2px);box-shadow:var(--golge-b)} .partner img,.partner svg{height:62px;width:auto;display:block} .partner a{display:block;line-height:0} .foot-partner{margin-top:18px} .yan-partner{display:grid;gap:12px;justify-items:center;text-align:center} .yan-partner p{font-size:13.4px;color:var(--fg-2);margin:0} .yan-partner .partner{width:100%} @media(max-width:520px){.partner img,.partner svg{height:52px}} /* ===================================================================== 1) SAYFA BAŞLIĞI VE HERO ZEMİNİ Düz beyaz yerine markadan gelen yumuşak bir zemin: iki renk lekesi, ince nokta dokusu ve alta doğru sönümlenen geçiş. Her iki temada çalışır. ===================================================================== */ .hero,.sayfa-bas{position:relative;overflow:hidden;background:var(--bg)} @supports (background:color-mix(in srgb,red,blue)){ .hero,.sayfa-bas{ background: radial-gradient(100% 120% at 88% -25%, color-mix(in srgb,var(--brand-2) 20%,transparent), transparent 58%), radial-gradient(85% 100% at -5% 0%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb,var(--brand) 6%,var(--bg)) 0%, var(--bg) 78%); } } /* ince nokta dokusu — üstte belirgin, aşağı inince kayboluyor */ .hero::before,.sayfa-bas::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0); background-size:24px 24px;opacity:.45; -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 72%); mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 72%); } .sayfa-bas{border-bottom:1px solid var(--line)} .sayfa-bas .wrap,.hero-in{position:relative;z-index:2} /* alt sınırda ince marka çizgisi */ .sayfa-bas::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.5; inset:auto 0 -1px 0; } /* ===================================================================== 2) MASAÜSTÜ MENÜ — daha canlı üst çubuk ===================================================================== */ .site-head{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease} .site-head::after{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent 8%,var(--brand) 50%,transparent 92%);opacity:.45; } .site-head.kaydi{box-shadow:0 14px 34px -26px rgba(10,16,40,.95)} .site-head.kaydi .head-in{height:62px} .head-in{transition:height .25s ease} /* menü bağlantıları: altında beliren marka çizgisi + aktif sayfa vurgusu */ .nav-link{position:relative} .nav-link::after{ content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px; background:var(--grad);transform:scaleX(0);transform-origin:center; transition:transform .26s cubic-bezier(.4,0,.2,1); } .nav-link:hover::after,.nav > li:hover .nav-link::after,.nav-link.aktif::after{transform:scaleX(1)} .nav-link.aktif{color:var(--fg);font-weight:600} .nav > li:hover .nav-link{background:transparent} /* telefon: yuvarlak ikon rozetiyle */ .tel-head{ padding:5px 15px 5px 5px;border:1px solid var(--line);border-radius:999px;gap:10px; transition:border-color .2s ease,background .2s ease; } .tel-head:hover{border-color:var(--line-2);background:var(--card)} .tel-head .ic{ width:30px;height:30px;padding:7px;border-radius:50%;background:var(--grad); stroke:#fff;box-sizing:border-box;flex:none; } /* tema ve menü düğmeleri */ .ikon-btn{transition:border-color .2s,color .2s,background .2s,transform .2s} .ikon-btn:hover{background:var(--card);transform:translateY(-1px)} /* CTA düğmesine hafif parıltı */ .head-cta{position:relative;overflow:hidden} .head-cta::after{ content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-18deg);transition:left .55s ease; } .head-cta:hover::after{left:130%} /* ===================================================================== 3) FOOTER — Google Partner rozeti ===================================================================== */ .foot-partner{ margin-top:20px;padding-top:18px;border-top:1px solid var(--line); display:flex;flex-direction:column;gap:9px;align-items:flex-start; } .foot-partner .partner-etiket{ font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .foot-partner .partner{ background:#fff;border:1px solid rgba(8,12,24,.10);border-radius:12px; padding:9px 13px;box-shadow:0 8px 20px -14px rgba(8,12,24,.5); } .foot-partner .partner img,.foot-partner .partner svg{height:44px} .foot-partner .partner:hover{transform:translateY(-2px)} /* ===================================================================== KOYU BANT — sayfa başlıkları ve hero Tema ne olursa olsun koyu kalır; içindeki tüm renk değişkenleri burada yeniden tanımlandığı için alt öğeler kendiliğinden uyum sağlar. ===================================================================== */ .hero,.sayfa-bas{ --fg:#F3F6FD; --fg-2:#B7C2DC; --muted:#8994B3; --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.24); --card:rgba(255,255,255,.055); --card-2:#0E1533; --bg:#0A0F26; --bg-2:#0E1533; --bg-3:#151D45; --input:rgba(255,255,255,.07); --brand-fg:#8FB4FF; --brand:#3D6FE5; --gain:#4FE0AC; color:var(--fg); position:relative;overflow:hidden; background: radial-gradient(65% 85% at 82% -12%, rgba(109,74,224,.55), transparent 62%), radial-gradient(60% 80% at 8% 112%, rgba(0,74,173,.55), transparent 62%), linear-gradient(158deg,#080C20 0%,#111A47 46%,#0A1030 100%); } .hero h1,.sayfa-bas h1,.hero h2,.sayfa-bas h2{color:var(--fg)} .hero .lead,.sayfa-bas .lead{color:var(--fg-2)} .hero h1 em{ background:linear-gradient(120deg,#7FA8FF,#B49CFF); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ızgara çizgileri */ .hero::before,.sayfa-bas::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); background-size:68px 68px; -webkit-mask-image:radial-gradient(120% 95% at 50% 0%, #000 42%, transparent 88%); mask-image:radial-gradient(120% 95% at 50% 0%, #000 42%, transparent 88%); opacity:1; } /* yıldız serpintisi */ .hero::after,.sayfa-bas::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background: radial-gradient(2px 2px at 12% 26%, rgba(255,255,255,.55), transparent), radial-gradient(1.6px 1.6px at 28% 62%, rgba(160,190,255,.5), transparent), radial-gradient(2.2px 2.2px at 46% 18%, rgba(255,255,255,.4), transparent), radial-gradient(1.4px 1.4px at 63% 74%, rgba(180,156,255,.55), transparent), radial-gradient(2px 2px at 78% 34%, rgba(255,255,255,.45), transparent), radial-gradient(1.6px 1.6px at 88% 66%, rgba(160,190,255,.45), transparent), radial-gradient(1.4px 1.4px at 36% 88%, rgba(255,255,255,.35), transparent), radial-gradient(1.8px 1.8px at 70% 8%, rgba(255,255,255,.35), transparent); opacity:.85; } .sayfa-bas .wrap,.hero-in{position:relative;z-index:3} .sayfa-bas{padding:60px 0 54px;border-bottom:0} .hero{padding:74px 0 60px} /* koyu bant içindeki düğmeler */ .hero .btn-ghost,.sayfa-bas .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff} .hero .btn-ghost:hover,.sayfa-bas .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)} /* ===================================================================== HIZLI TEKLİF FORMU ===================================================================== */ .hizli{ display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;max-width:820px;align-items:stretch; } .hizli-tuzak{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .hizli-alan{flex:1 1 210px;min-width:170px} .hizli input[type=text],.hizli input[type=tel]{ width:100%;height:100%;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.55); border-radius:13px;padding:15px 18px;font-family:var(--body);font-size:16px;color:#0A0F26; transition:border-color .18s ease,box-shadow .18s ease; } .hizli input::placeholder{color:#7C87A6} .hizli input:focus{outline:none;border-color:#8FB4FF;box-shadow:0 0 0 3px rgba(143,180,255,.35)} .hizli input.gecersiz{border-color:#FF8A7A;box-shadow:0 0 0 3px rgba(255,138,122,.3)} .hizli-btn{flex:0 0 auto;padding:15px 26px;font-size:15.5px} .hizli-btn:disabled{opacity:.65;cursor:default;transform:none} .hizli-not{ flex-basis:100%;margin:2px 0 0;font-size:13.6px;color:rgba(255,255,255,.62);min-height:20px; } .hizli-not.ok{color:#5FE8B8;font-weight:600} .hizli-not.hata{color:#FFA69A;font-weight:600} @media(max-width:640px){ .hizli{gap:10px} .hizli-alan{flex:1 1 100%} .hizli-btn{width:100%;justify-content:center} } /* iletişim sayfasındaki formda geçersiz alan */ .alan input.gecersiz{border-color:#E2574B;box-shadow:0 0 0 3px rgba(226,87,75,.22)} /* ===================================================================== AÇILMIŞ KOYU BANT + BEYAZ ARAMA KARTI + YENİDEN DÜZENLENEN NEDEN BÖLÜMÜ (bu blok önceki tanımların üzerine yazar) ===================================================================== */ /* --- bant: siyaha yakın lacivert yerine daha canlı çivit mavisi --- */ .hero,.sayfa-bas{ --fg:#F6F8FE; --fg-2:#C6D0E8; --muted:#A2ADCA; --line:rgba(255,255,255,.17); --line-2:rgba(255,255,255,.30); --card:rgba(255,255,255,.08); --card-2:#1B2550; --bg:#1A2450; --bg-2:#1F2A5C; --bg-3:#27336B; --input:rgba(255,255,255,.10); --brand-fg:#A9C4FF; --brand:#5C87F0; --gain:#5FE8B8; background: radial-gradient(62% 82% at 84% -14%, rgba(132,102,246,.62), transparent 62%), radial-gradient(58% 78% at 6% 110%, rgba(56,124,235,.58), transparent 62%), linear-gradient(158deg,#1B2554 0%,#2A3780 48%,#1E2860 100%); } .hero::before,.sayfa-bas::before{ background-image: linear-gradient(to right, rgba(255,255,255,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.075) 1px, transparent 1px); } /* --- ana sayfadaki canlı arama kartı: koyu değil, beyaz --- */ .hero .serp{ --card-2:#FFFFFF; --bg:#F3F6FD; --fg:#0A1020; --fg-2:#404B66; --muted:#6B7590; --line:rgba(10,16,32,.12); --line-2:rgba(10,16,32,.22); --gain:#0B8A62; --brand:#004AAD; --brand-fg:#004AAD; color:var(--fg); background:#FFFFFF; border-color:rgba(10,16,32,.10); box-shadow:0 34px 66px -30px rgba(6,10,40,.62); } .hero .serp .srow-t{color:#0A1020} .hero .serp .canli{color:#6B7590} /* --- NEDEN bölümü: tema tersine dönmesin --- */ .neden{ --contrast-bg:transparent; --contrast-fg:var(--fg); --contrast-fg-2:var(--fg-2); --contrast-line:var(--line); color:var(--fg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: radial-gradient(55% 75% at 88% 2%, color-mix(in srgb,var(--brand-2) 14%,transparent), transparent 62%), radial-gradient(48% 68% at 2% 100%, color-mix(in srgb,var(--brand) 12%,transparent), transparent 62%), var(--bg-2); } .neden .eyebrow{color:var(--brand-fg)} .neden .lead{color:var(--fg-2)} .neden-item{ background:var(--card); border:1px solid var(--line); box-shadow:var(--golge-k); transition:transform .22s ease,border-color .22s,box-shadow .22s; } .neden-item:hover{transform:translateY(-3px);border-color:var(--rk-a,var(--brand));box-shadow:var(--golge-b)} .neden-item h4{color:var(--fg)} .neden-item p{color:var(--fg-2)} .neden .panel-kutu{border-color:var(--line)} .neden p[style]{color:var(--fg-2)!important} /* ===================================================================== SAYI ŞERİDİ — kart görünümü (önceki tanımların üzerine yazar) ===================================================================== */ .sayilar{ border:0;padding:52px 0;position:relative;overflow:hidden; background: radial-gradient(52% 70% at 90% 0%, color-mix(in srgb,var(--brand-2) 11%,transparent), transparent 62%), radial-gradient(46% 64% at 4% 100%, color-mix(in srgb,var(--brand) 10%,transparent), transparent 62%), var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .sayilar-in{ display:grid;gap:16px;grid-template-columns:repeat(2,1fr);padding:0; } @media(min-width:900px){.sayilar-in{grid-template-columns:repeat(4,1fr);gap:18px}} .sayi{ position:relative;overflow:hidden;padding:26px 22px 24px; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); box-shadow:var(--golge-k); transition:transform .24s ease,border-color .24s,box-shadow .24s; display:flex;flex-direction:column;gap:4px; } .sayi:hover{transform:translateY(-4px);border-color:var(--rk-a);box-shadow:var(--golge-b)} /* üstte ince renk şeridi */ .sayi::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:linear-gradient(90deg,var(--rk-a),var(--rk-b)); } /* sağ üstte solgun renk lekesi */ .sayi::after{ content:"";position:absolute;right:-34px;top:-34px;width:118px;height:118px;border-radius:50%; background:var(--rk-a);opacity:.09;transition:opacity .24s ease,transform .24s ease; } .sayi:hover::after{opacity:.16;transform:scale(1.12)} .sayi-ikon{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,var(--rk-a),var(--rk-b));color:#fff; margin-bottom:12px;position:relative;z-index:1; box-shadow:0 8px 18px -10px var(--rk-a); } .sayi-ikon .ic{width:19px;height:19px;stroke:#fff} .sayi b{ display:block;position:relative;z-index:1; font-family:var(--display);font-size:clamp(30px,3.4vw,40px);font-weight:800; letter-spacing:-.045em;line-height:1; background:linear-gradient(135deg,var(--rk-a),var(--rk-b)); -webkit-background-clip:text;background-clip:text;color:transparent; font-variant-numeric:tabular-nums; } .sayi small{ position:relative;z-index:1;margin-top:7px; font-size:13.6px;font-weight:500;letter-spacing:.01em;text-transform:none; color:var(--fg-2);line-height:1.4; } /* koyu bandın hemen altındaki şeritte üst çizgi gereksiz */ .hero + .sayilar{border-top:0} /* ===================================================================== ÇEREZ BİLDİRİMİ — küçük, köşede, ekranı kapatmayan ===================================================================== */ .cerez{position:fixed;left:18px;bottom:18px;z-index:95;width:min(360px,calc(100vw - 28px));pointer-events:none} .cerez[hidden]{display:none} .cerez-kutu{ pointer-events:auto;background:var(--bg-2);border:1px solid var(--line); border-radius:16px;padding:16px 17px;box-shadow:var(--golge-b); transform:translateY(14px) scale(.98);opacity:0; transition:transform .26s cubic-bezier(.2,.8,.3,1),opacity .26s ease; } .cerez.acik .cerez-kutu{transform:none;opacity:1} .cerez-ust{display:flex;gap:11px;align-items:flex-start} .cerez-ikon{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff} .cerez-ikon .ic{stroke:#fff;width:16px;height:16px} .cerez h3{font-size:14.8px;margin:0 0 4px;letter-spacing:-.01em} .cerez p{margin:0;font-size:12.9px;color:var(--fg-2);line-height:1.55} .cerez p a{color:var(--brand-fg);text-decoration:underline;text-underline-offset:2px} .cerez-tercih{display:grid;gap:7px;margin:12px 0 0} .cerez-satir{display:flex;gap:9px;align-items:flex-start;cursor:pointer;border:1px solid var(--line); border-radius:10px;padding:9px 10px;background:var(--card);transition:border-color .18s ease} .cerez-satir:hover{border-color:var(--line-2)} .cerez-satir input{width:15px;height:15px;margin:1px 0 0;accent-color:var(--brand);flex:none} .cerez-satir b{display:block;font-size:12.9px;font-weight:600;font-family:var(--body)} .cerez-satir small{display:block;font-size:11.6px;color:var(--muted);margin-top:2px;line-height:1.45} .cerez-kilitli{opacity:.65;cursor:default} .cerez-butonlar{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;align-items:center} .cerez-butonlar .btn{font-size:12.9px;padding:9px 14px;border-radius:10px;flex:1 1 0;justify-content:center;min-width:0} .cerez-ozellestir{ flex:0 0 auto!important;background:none;border:0;padding:6px 2px!important; color:var(--muted);font-size:12.3px;text-decoration:underline;text-underline-offset:2px; width:100%;justify-content:flex-start!important; } .cerez-ozellestir:hover{color:var(--fg);transform:none} .cerez-kaydet{flex:1 1 100%!important} @media(max-width:520px){ .cerez{left:10px;right:10px;bottom:10px;width:auto} .cerez-kutu{padding:14px 15px;border-radius:14px} } .foot-alt a[data-cerez-ac]{text-decoration:underline;text-underline-offset:2px} /* ===================================================================== TEŞEKKÜR PENCERESİ ===================================================================== */ .tesekkur{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px} .tesekkur[hidden]{display:none} .tesekkur-arka{position:absolute;inset:0;background:rgba(6,10,26,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s} .tesekkur.acik .tesekkur-arka{opacity:1} .tesekkur-kutu{ position:relative;width:100%;max-width:400px;background:var(--bg-2); border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 30px 26px; text-align:center;box-shadow:var(--golge-b);overflow:hidden; transform:translateY(16px) scale(.96);opacity:0; transition:transform .3s cubic-bezier(.2,.8,.3,1),opacity .3s ease; } .tesekkur.acik .tesekkur-kutu{transform:none;opacity:1} .tesekkur-ikon{ width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px; background:linear-gradient(135deg,#14A97F,#0A8360);color:#fff; box-shadow:0 14px 30px -14px rgba(20,169,127,.85); } .tesekkur-ikon .ic{width:30px;height:30px;stroke:#fff;stroke-width:2.4} .tesekkur h3{font-size:23px;margin:0 0 8px} .tesekkur p{margin:0;color:var(--fg-2);font-size:15px;line-height:1.6} .tesekkur-x{ position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%; border:1px solid var(--line);background:transparent;color:var(--muted); display:grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,background .2s; } .tesekkur-x:hover{color:var(--fg);border-color:var(--line-2);background:var(--card)} .tesekkur-cubuk{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)} .tesekkur-cubuk i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(1)} .tesekkur.sayiyor .tesekkur-cubuk i{transform:scaleX(0);transition:transform 5s linear} /* ===================================================================== BLOG — forum benzeri konu akışı ===================================================================== */ .blog-duzen{display:grid;gap:30px;align-items:start} @media(min-width:1000px){.blog-duzen{grid-template-columns:262px minmax(0,1fr);gap:40px}} .blog-yan{display:grid;gap:16px} @media(min-width:1000px){.blog-yan{position:sticky;top:96px}} .blog-yan-kutu{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); padding:18px;box-shadow:var(--golge-k); } .blog-yan-kutu > h4{ display:flex;align-items:center;gap:9px;margin:0 0 13px; font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); } .blog-yan-kutu > h4 .ic{color:var(--brand-fg)} .blog-yan-kutu.yan-cta > h4{color:rgba(255,255,255,.8)} .blog-yan-kutu.yan-cta > h4 .ic{color:#fff} .kat-liste{display:grid;gap:3px} .kat-liste a{ display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:11px; text-decoration:none;color:var(--fg-2);font-size:14.4px;border:1px solid transparent; transition:background .18s,color .18s,border-color .18s; } .kat-liste a .ic{width:16px;height:16px;color:var(--rk-a,var(--brand-fg))} .kat-liste a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kat-liste a em{ font-style:normal;font-size:12px;font-weight:600;color:var(--muted); background:var(--bg-3);border-radius:999px;padding:2px 9px; } .kat-liste a:hover{background:var(--bg-3);color:var(--fg)} .kat-liste a.aktif{ background:linear-gradient(135deg,var(--rk-a),var(--rk-b));color:#fff;border-color:transparent;font-weight:600; } .kat-liste a.aktif .ic{color:#fff} .kat-liste a.aktif em{background:rgba(255,255,255,.22);color:#fff} .blog-ust{ display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px; border-bottom:1px solid var(--line);font-size:13.6px;color:var(--muted); } .blog-ust .btn{margin-left:auto} .konu-akisi{display:grid;gap:12px} .konu{ position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center; padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); text-decoration:none;box-shadow:var(--golge-k);overflow:hidden; transition:transform .22s ease,border-color .22s,box-shadow .22s; } .konu::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--rk-a),var(--rk-b));opacity:0;transition:opacity .22s; } .konu:hover{transform:translateY(-3px);border-color:var(--rk-a);box-shadow:var(--golge-b)} .konu:hover::before{opacity:1} .konu-gor{ width:132px;height:88px;border-radius:12px;overflow:hidden;flex:none;background:var(--bg-3); border:1px solid var(--line); } .konu-gor img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease} .konu:hover .konu-gor img{transform:scale(1.06)} .konu-ic{display:grid;gap:5px;min-width:0} .konu-ust{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.4px;color:var(--muted)} .konu-ust em{font-style:normal;display:inline-flex;align-items:center;gap:5px} .konu-ust .ic{width:13px;height:13px} .konu-etiket{ background:linear-gradient(135deg,var(--rk-a),var(--rk-b));color:#fff; border-radius:999px;padding:3px 11px;font-size:11.6px;font-weight:600;letter-spacing:.02em; } .konu-ic strong{ font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--fg); line-height:1.35; } .konu:hover .konu-ic strong{color:var(--rk-a)} .konu-ozet{ font-size:14.2px;color:var(--fg-2);line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .konu-alt{display:flex;flex-wrap:wrap;gap:14px;font-size:12.4px;color:var(--muted);margin-top:2px} .konu-alt em{font-style:normal;display:inline-flex;align-items:center;gap:5px} .konu-alt .ic{width:13px;height:13px} .konu-ok{ width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center; border:1px solid var(--line);color:var(--muted);transition:background .22s,color .22s,border-color .22s; } .konu:hover .konu-ok{ background:linear-gradient(135deg,var(--rk-a),var(--rk-b));color:#fff;border-color:transparent; } .konu-ok .ic{width:16px;height:16px} @media(max-width:720px){ .konu{grid-template-columns:auto minmax(0,1fr);gap:13px;padding:13px} .konu-gor{width:88px;height:70px;border-radius:10px} .konu-ic strong{font-size:16px} .konu-ozet{-webkit-line-clamp:2;font-size:13.6px} .konu-ok{display:none} .konu-alt{gap:11px;font-size:11.8px} } @media(max-width:420px){ .konu-gor{display:none} .konu{grid-template-columns:minmax(0,1fr)} } /* ===================================================================== OKUMA İLERLEME ÇUBUĞU ===================================================================== */ .okuma-cubugu{ position:fixed;left:0;right:0;top:0;height:3px;z-index:85; background:transparent;pointer-events:none; } .okuma-cubugu i{ display:block;height:100%;width:0; background:linear-gradient(90deg,#3D6FE5,#8466F6,#3FD9A0); box-shadow:0 0 12px -2px rgba(61,111,229,.9); transition:width .12s linear; } @media(prefers-reduced-motion:reduce){.okuma-cubugu i{transition:none}} /* ===================================================================== SSS — mobil düzen ===================================================================== */ .sss-liste{display:grid;gap:6px;min-width:0} .sss-yan,.sss-duzen > div{min-width:0} .sss-ara input{min-width:0} @media(max-width:979px){ .sss-duzen{grid-template-columns:minmax(0,1fr);gap:18px} .sss-yan{position:static;top:auto;display:block;min-width:0} .sss-yan .sss-ara{margin-bottom:10px} /* etiketler satır atlayarak sığar, yatay kaydırma yok */ .sss-liste{display:flex;flex-wrap:wrap;gap:7px;overflow:visible} .sss-yan .sss-liste a{ flex:0 1 auto;max-width:100%;min-width:0; display:inline-flex;align-items:center;gap:7px; border:1px solid var(--line);border-radius:999px; padding:8px 13px;font-size:13.4px;line-height:1.2; background:var(--card);color:var(--fg-2); } .sss-yan .sss-liste a .ic{width:15px;height:15px;flex:none;color:var(--rk-a,var(--brand-fg))} .sss-yan .sss-liste a > span:not(.say){ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .sss-yan .sss-liste a .say{ flex:none;font-size:11.4px;font-weight:600;color:var(--muted); background:var(--bg-3);border-radius:999px;padding:1px 7px; } /* SEÇİLİ ETİKET — bu kural olmadan beyaz zemin üstünde beyaz yazı kalıyordu */ .sss-yan .sss-liste a.aktif{ background:linear-gradient(135deg,var(--rk-a,#004AAD),var(--rk-b,#312FBE)); color:#fff;border-color:transparent;font-weight:600; box-shadow:0 8px 18px -10px var(--rk-a,#004AAD); } .sss-yan .sss-liste a.aktif .ic{color:#fff} .sss-yan .sss-liste a.aktif .say{background:rgba(255,255,255,.26);color:#fff} .sss-blok{margin-bottom:26px} .sss-blok > h3{font-size:18px;gap:9px;margin-bottom:12px} .sss-blok > h3 .kart-ikon{width:30px;height:30px;border-radius:9px;margin:0} .sss-blok > h3 .kart-ikon .ic{width:14px;height:14px} .soru{margin-bottom:8px} .soru summary{padding:14px 15px;font-size:15.2px;gap:10px} .soru .cevap{padding:0 15px 15px;font-size:14.5px} } @media(max-width:520px){ .sss-yan .sss-liste a{font-size:12.8px;padding:7px 11px;gap:6px} .sss-yan .sss-liste a .ic{width:14px;height:14px} .soru summary{font-size:14.6px;padding:13px 14px} } /* ===================================================================== BLOG — öne çıkan yazı ve ikili kartlar ===================================================================== */ .blog-icerik{min-width:0} .blog-ara-baslik{ font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--muted); text-transform:uppercase;margin:26px 0 14px;padding-bottom:10px; border-bottom:1px solid var(--line);font-family:var(--body); } /* --- öne çıkan --- */ .one-yazi{ position:relative;display:grid;gap:0;margin-bottom:16px;overflow:hidden; border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card); text-decoration:none;box-shadow:var(--golge-k); transition:transform .24s ease,border-color .24s,box-shadow .24s; } @media(min-width:760px){.one-yazi{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}} .one-yazi:hover{transform:translateY(-4px);border-color:var(--rk-a);box-shadow:var(--golge-b)} .one-gorsel{position:relative;overflow:hidden;background:var(--bg-3);aspect-ratio:16/10} .one-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .one-yazi:hover .one-gorsel img{transform:scale(1.05)} .one-rozet{ position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px; font-style:normal;font-size:11.6px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:#fff;background:linear-gradient(135deg,var(--rk-a),var(--rk-b)); border-radius:999px;padding:6px 13px;box-shadow:0 10px 22px -12px var(--rk-a); } .one-rozet .ic{width:13px;height:13px;stroke:#fff} .one-ic{display:grid;gap:9px;align-content:center;padding:26px 26px 24px} .one-ic strong{ font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:700; letter-spacing:-.025em;color:var(--fg);line-height:1.28; } .one-yazi:hover .one-ic strong{color:var(--rk-a)} .one-ozet{ font-size:15px;color:var(--fg-2);line-height:1.6; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .one-btn{ display:inline-flex;align-items:center;gap:8px;margin-top:6px;justify-self:start; font-size:14.4px;font-weight:600;color:var(--rk-a); } .one-btn .ic{transition:transform .22s ease} .one-yazi:hover .one-btn .ic{transform:translateX(4px)} /* --- ikili kartlar --- */ .orta-izgara{display:grid;gap:16px;margin-bottom:8px} @media(min-width:640px){.orta-izgara{grid-template-columns:repeat(2,1fr)}} .orta-kart{ display:flex;flex-direction:column;overflow:hidden;text-decoration:none; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card); box-shadow:var(--golge-k);transition:transform .24s ease,border-color .24s,box-shadow .24s; } .orta-kart:hover{transform:translateY(-4px);border-color:var(--rk-a);box-shadow:var(--golge-b)} .orta-gorsel{aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)} .orta-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .orta-kart:hover .orta-gorsel img{transform:scale(1.05)} .orta-ic{display:grid;gap:7px;padding:18px 18px 20px;flex:1;align-content:start} .orta-ic strong{ font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.02em; color:var(--fg);line-height:1.35; } .orta-kart:hover .orta-ic strong{color:var(--rk-a)} .orta-ic .konu-ozet{-webkit-line-clamp:2} .orta-ic .konu-alt{margin-top:auto;padding-top:6px} /* --- yazısı olmayan kategori --- */ .kat-liste a.bos{opacity:.55} .kat-liste a.bos em{background:transparent;border:1px solid var(--line)} @media(max-width:759px){ .one-ic{padding:20px} .one-gorsel{aspect-ratio:16/9} } /* ===================================================================== DETAY SAYFASI KAPAK GÖRSELİ ===================================================================== */ .icerik img.kapak{ width:100%;aspect-ratio:2/1;max-height:430px;object-fit:cover;object-position:center; border-radius:var(--r-lg);border:1px solid var(--line); margin:0 0 28px;display:block;box-shadow:var(--golge-k); } @media(max-width:900px){.icerik img.kapak{aspect-ratio:16/8;max-height:320px;margin-bottom:22px}} @media(max-width:520px){.icerik img.kapak{aspect-ratio:16/9;max-height:250px;border-radius:var(--r-md)}} .icerik > img:not(.kapak),.icerik figure img{ width:100%;max-height:420px;object-fit:cover; border-radius:var(--r-lg);border:1px solid var(--line);margin:24px 0; } /* ===================================================================== KURUCU / EKİP BLOĞU Görsel, hikaye metni boyunca yanınızda ilerler; bölüm bitince (vizyon-misyon başlarken) yerinde kalır. ===================================================================== */ .kurucu{display:grid;align-items:start;gap:30px} @media(min-width:980px){ .kurucu{grid-template-columns:340px minmax(0,1fr);gap:48px} } @media(min-width:1240px){.kurucu{grid-template-columns:380px minmax(0,1fr);gap:56px}} .kurucu-gorsel{isolation:isolate;width:100%} .kurucu-gorsel.gorun{transform:none} .kurucu-gorsel::before{ content:"";position:absolute;inset:-12px -12px 20px;z-index:-1; border-radius:calc(var(--r-xl) + 8px); background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 26%,transparent), color-mix(in srgb,var(--brand-2) 22%,transparent)); opacity:.45;filter:blur(3px); } .kurucu-gorsel img{ width:100%;aspect-ratio:7/10;object-fit:cover;object-position:center 22%; max-height:min(545px,calc(100vh - 150px)); border-radius:var(--r-xl);border:1px solid var(--line); box-shadow:var(--golge-b);display:block; } .kurucu-etiket{ position:absolute;left:14px;right:14px;bottom:14px; display:flex;flex-direction:column;gap:2px;text-align:left; background:rgba(10,16,38,.74);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16);border-radius:var(--r-md); padding:12px 15px;box-shadow:0 12px 26px -16px rgba(0,0,0,.85); } .kurucu-etiket b{font-family:var(--display);font-size:15.5px;color:#fff;letter-spacing:-.01em} .kurucu-etiket small{font-size:11px;letter-spacing:.09em;color:rgba(255,255,255,.7);font-weight:600} .kurucu > div:last-child{max-width:68ch;min-width:0} .kurucu .icerik{max-width:none} .kurucu .icerik h2{font-size:clamp(21px,2vw,26px);margin:26px 0 10px} .kurucu .icerik h3{font-size:18px;margin:20px 0 8px} .kurucu .icerik p{font-size:16.2px} .kurucu .icerik > p:first-child{margin-top:0} @media(max-width:979px){ .kurucu{gap:24px} .kurucu-gorsel{position:static;max-width:460px;margin:0 auto} .kurucu-gorsel img{aspect-ratio:16/11;max-height:320px;object-position:center 26%} .kurucu-gorsel::before{inset:-8px -8px 14px} } @media(max-width:520px){ .kurucu-gorsel img{aspect-ratio:16/10;max-height:260px} .kurucu-etiket{left:11px;right:11px;bottom:11px;padding:10px 13px} } /* ===================================================================== YAPIŞKAN KURUCU GÖRSELİ Bu kural dosyanın sonunda ve yüksek özgüllükle duruyor; daha önce .kurucu-gorsel{position:relative} tarafından eziliyordu. ===================================================================== */ @media(min-width:980px){ .kurucu > .kurucu-gorsel{ position:sticky; top:100px; align-self:start; } } @media(max-width:979px){ .kurucu > .kurucu-gorsel{position:static} } /* ===================================================================== SAYFA YOLU (KIRINTI) — koyu bandın üstüne oturur ===================================================================== */ .kirinti-bant{ position:relative;z-index:5; padding:16px 0 0;margin-bottom:-52px;pointer-events:none; } .kirinti-bant .wrap{pointer-events:auto} .sayfa-bas{padding-top:74px} .kirinti{display:block;padding:0;font-size:13px} .kirinti ol{ display:flex;flex-wrap:nowrap;align-items:center;gap:0; list-style:none;margin:0;padding:0;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .kirinti ol::-webkit-scrollbar{display:none} .kirinti li{display:flex;align-items:center;flex:0 0 auto;min-width:0} .kirinti li + li::before{ content:"";width:5px;height:5px;flex:none;margin:0 10px; border-right:1.5px solid rgba(255,255,255,.4); border-bottom:1.5px solid rgba(255,255,255,.4); transform:rotate(-45deg); } .kirinti a,.kirinti li > span{ display:inline-flex;align-items:center;gap:6px; color:rgba(255,255,255,.7);text-decoration:none;white-space:nowrap; padding:5px 0;transition:color .18s ease; } .kirinti a:hover{color:#fff} .kirinti a .ic,.kirinti li > span .ic{width:14px;height:14px;opacity:.85} .kirinti li:last-child > span{ color:#fff;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .kirinti li:last-child{min-width:0;overflow:hidden} @media(max-width:640px){ .kirinti-bant{padding-top:12px;margin-bottom:-44px} .sayfa-bas{padding-top:60px} /* mobilde yalnızca ev ikonu ve bulunulan sayfa görünür */ .kirinti li:not(:first-child):not(:last-child){display:none} .kirinti li:first-child a > span{display:none} .kirinti li:last-child::before{margin:0 8px} .kirinti{font-size:12.6px} } /* ===================================================================== MOBİL DÜZELTMELERİ — dosyanın sonunda, yüksek özgüllükle ===================================================================== */ /* 1) Yan sütun CTA'sı görünmüyordu. .yan-cta{background:var(--grad)} kuralı (satır ~409) daha sonra gelen .blog-yan-kutu{background:var(--card)} tarafından eziliyordu; aynı özgüllükte olduğu için sonraki kazanıyordu. Sonuç: beyaz zemin üstüne beyaz yazı. İki sınıf birlikte yazılarak (0,2,0) özgüllüğe çıkarıldı. */ .blog-yan-kutu.yan-cta{ background:var(--grad); color:#fff; border:0; } .blog-yan-kutu.yan-cta h4{color:rgba(255,255,255,.85)} .blog-yan-kutu.yan-cta p{color:rgba(255,255,255,.92)} .blog-yan-kutu.yan-cta .btn{background:#fff;color:#08132B;width:100%;box-shadow:none} .blog-yan-kutu.yan-cta .btn:hover{background:rgba(255,255,255,.9);color:#08132B} /* 2) Blog listesinde mobilde önce yazılar görünsün. Yan sütun HTML'de önce geldiği için mobilde üç kutuyu geçmeden yazılara ulaşılamıyordu. */ @media(max-width:999px){ .blog-icerik{order:-1} .blog-yan{margin-top:8px} } /* 3) Okuma ilerleme çubuğu mobilde de görünsün. z-index başlıktan (80) ve çekmeceden (90) yüksek tutuldu; mobilde biraz kalınlaştırıldı. */ .okuma-cubugu{z-index:120;height:3px} @media(max-width:719px){ .okuma-cubugu{height:4px} .okuma-cubugu i{box-shadow:0 0 10px -1px rgba(61,111,229,.95)} } /* ===================================================================== İÇERİK TABLOLARI — çerez envanteri, karşılaştırma tabloları vb. Sitede hiç tablo stili yoktu; tarayıcı varsayılanıyla render ediliyor ve dar ekranda düzeni bozuyordu. ===================================================================== */ .icerik table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:15px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .icerik thead th{ background:var(--card); color:var(--fg); font-family:var(--mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; font-weight:600; text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); white-space:nowrap; } .icerik tbody td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--fg); line-height:1.55; } .icerik tbody tr:last-child td{border-bottom:0} .icerik tbody tr:nth-child(even) td{background:rgba(127,137,159,.05)} .icerik table code,.icerik td code{ font-family:var(--veri);font-size:13px; background:rgba(127,137,159,.14);padding:2px 6px;border-radius:6px; word-break:break-all; } /* Mobilde tabloyu karta çevir. app.js her hücreye başlık metnini data-etiket olarak yazar. */ @media(max-width:719px){ .icerik table, .icerik thead, .icerik tbody, .icerik tr, .icerik th, .icerik td{display:block;width:100%} .icerik table{border:0;margin:22px 0} .icerik thead{position:absolute;left:-9999px} /* ekran okuyucular için kalır */ .icerik tbody tr{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); padding:6px 14px 12px; margin-bottom:12px; } .icerik tbody tr:nth-child(even) td{background:transparent} .icerik tbody td{ padding:9px 0; border-bottom:1px solid var(--line); } .icerik tbody tr td:last-child{border-bottom:0} .icerik tbody td[data-etiket]::before{ content:attr(data-etiket); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } } /* Uzun bağlantı ve adreslerin dar ekranda taşmasını önle */ .icerik a{word-break:break-word} .icerik{overflow-wrap:anywhere} /* ===================================================================== REFERANSLAR Logolar saydam zeminli. Hem açık hem koyu temada okunabilmesi için her logo açık renkli bir kart içinde gösterilir. ===================================================================== */ .ref-sayac{color:var(--muted);font-family:var(--veri);font-size:13.5px;margin-top:10px} .ref-sayac strong{color:var(--fg);font-size:16px} .ref-izgara{ display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px; } .ref-kart{ display:flex;align-items:center;justify-content:center; aspect-ratio:32/13; padding:14px 16px; background:#FFFFFF; border:1px solid rgba(10,16,32,.10); border-radius:var(--r-md); text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.ref-kart:hover{ transform:translateY(-3px); border-color:rgba(10,16,32,.20); box-shadow:0 16px 30px -18px rgba(6,10,40,.5); } .ref-kart img{ max-width:100%;max-height:100%; width:auto;height:auto; object-fit:contain; transition:transform .25s ease; } a.ref-kart:hover img{transform:scale(1.04)} /* --- ana sayfa şeridi --- */ .ref-serit-blok{padding:56px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ref-serit-bas{ display:flex;align-items:flex-end;justify-content:space-between; gap:20px;flex-wrap:wrap;margin-bottom:26px; } .ref-serit-etiket{ display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em; text-transform:uppercase;color:var(--muted);margin-bottom:8px; } .ref-serit-bas h2{font-size:clamp(21px,2.2vw,28px);margin:0} .ref-serit{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } .ref-serit-oge{ display:flex;align-items:center;justify-content:center; aspect-ratio:32/13;padding:12px 14px; background:#FFFFFF; border:1px solid rgba(10,16,32,.09); border-radius:var(--r-sm); } .ref-serit-oge img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; } .bos-uyari{color:var(--muted);text-align:center;padding:40px 0} @media(max-width:719px){ .ref-izgara{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px} .ref-serit{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:9px} .ref-serit-blok{padding:40px 0} .ref-serit-bas{margin-bottom:20px} } /* ===================================================================== KOYU BANDI KALDIR "KOYU BANT — sayfa başlıkları ve hero" bloğu .hero ve .sayfa-bas alanlarını koyu mavi yapıyor ve içerideki tüm renk değişkenlerini yeniden tanımlıyordu. Burada o blok bütünüyle etkisiz hâle getirilir. Yerleşim, boşluk ve yazı boyutlarına DOKUNULMAZ. ===================================================================== */ /* 1) Renk değişkenleri sayfanın kendi temasına geri döner */ .hero,.sayfa-bas{ --fg:inherit; --fg-2:inherit; --muted:inherit; --line:inherit; --line-2:inherit; --card:inherit; --card-2:inherit; --bg:inherit; --bg-2:inherit; --bg-3:inherit; --input:inherit; --brand-fg:inherit; --brand:inherit; --gain:inherit; color:inherit; background:var(--bg); } /* 2) Izgara çizgileri ve yıldız serpintisi kaldırıldı */ .hero::before,.sayfa-bas::before, .hero::after,.sayfa-bas::after{ content:none; display:none; } /* 3) Koyu zemine göre beyaz yapılmış düğmeler normale döner */ .hero .btn-ghost,.sayfa-bas .btn-ghost{ border-color:var(--line); color:var(--fg); } .hero .btn-ghost:hover,.sayfa-bas .btn-ghost:hover{ border-color:var(--brand); background:transparent; } /* 4) Başlıktaki renkli vurgu marka gradyanına döner */ .hero h1 em{ background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent; } /* 5) Alt sınır çizgisi geri geldi — bant kalkınca ayrım gerekiyor */ .sayfa-bas{border-bottom:1px solid var(--line)} .hero{border-bottom:1px solid var(--line)} /* ===================================================================== ANA SAYFA KURUCU BÖLÜMÜ — sağ sütun dolgusu Metin bitince altta boşluk kalıyordu. Site sayılarından dördü ve kısa bir güven notu eklendi. ===================================================================== */ .kurucu-sayilar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:30px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; } .ks-oge{ background:var(--bg); padding:16px 18px; display:grid; gap:3px; } .ks-oge b{ font-family:var(--display); font-size:clamp(20px,2vw,25px); line-height:1.1; color:var(--fg); } .ks-oge small{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); line-height:1.35; } .kurucu-not{ display:flex; align-items:flex-start; gap:11px; margin-top:20px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--fg-2); font-size:14.2px; line-height:1.6; } .kurucu-not svg{flex:0 0 auto;width:19px;height:19px;color:var(--gain);margin-top:1px} @media(min-width:1180px){ .kurucu-sayilar{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:479px){ .kurucu-sayilar{grid-template-columns:minmax(0,1fr)} .ks-oge{padding:13px 15px} } /* ===================================================================== ANA SAYFA ARAMA KARTI — mobil titreme çözümü Sorun: arama kutusundaki metin harf harf yazılıyor. Kutu içeriğe göre boyutlandığı için her karakterde kart daralıp genişliyordu. Çözüm JS'e bağlı değil, tamamen yapısal: 1) Izgara sütunları içerikten bağımsız (minmax(0,1fr)) 2) Yazı alanı sabit bir ızgara sütunu; metin ne uzunlukta olursa olsun sütun genişliği değişmez, taşan kısım gizlenir. ===================================================================== */ /* 1) Hero ızgarası içerikten etkilenmesin */ .hero-in{grid-template-columns:minmax(0,1fr)} @media(min-width:1020px){ .hero-in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)} } /* 2) Kart ve alt öğeler taşmayı engellesin */ .serp{min-width:0;max-width:100%;overflow:hidden} .serp-rows,.srow,.srow-t,.srow-u{min-width:0} .serp-foot{grid-template-columns:repeat(3,minmax(0,1fr))} /* 3) Arama çubuğu: simge | yazı alanı | rozet — orta sütun sabit */ .serp-bar{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; min-height:44px; } .serp-yaz{ display:flex; align-items:center; min-width:0; overflow:hidden; } #q{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .serp-bar .caret{flex:0 0 auto;margin-left:2px} .serp-bar .canli{white-space:nowrap} /* 4) Uzun adres satırları kartı itmesin */ .serp .srow-u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 5) Sorgu değişince başlık uzunluğu değişiyordu; iki satırlık yer ayrıldı */ .serp .srow-ad .srow-t{min-height:44px} /* 6) Alt şeritteki değerler kırılmasın */ .serp-foot b{white-space:nowrap} .serp-foot small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} @media(max-width:560px){ .serp{padding:14px} .serp-bar{font-size:12.5px;padding:10px 13px;gap:8px} .serp-bar .canli{font-size:9.5px;letter-spacing:.06em} .srow{padding:10px 12px} .srow-t{font-size:14px} .srow-u{font-size:10.5px} .serp .srow-ad .srow-t{min-height:40px} .serp-foot > div{padding:10px 8px} .serp-foot b{font-size:15px} .serp-foot small{font-size:9px;letter-spacing:.05em} } @media(max-width:400px){ .serp-bar{grid-template-columns:auto minmax(0,1fr)} .serp-bar .canli{display:none} } /* ===================================================================== HİZMETLER SAYFASI — kategori blokları Görsel yan sütunda 330px genişlikte gösteriliyordu; içindeki yazılar ekranda okunmuyordu. Görsel tam genişliğe alındı, metin altına indi. ===================================================================== */ .hz-blok{ margin-bottom:64px; padding-bottom:64px; border-bottom:1px solid var(--line); } .hz-blok:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} .hz-medya{ border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; background:var(--card); margin-bottom:26px; box-shadow:var(--golge-k); max-width:820px; } .hz-medya img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; } .hz-govde{max-width:900px} /* başlık satırı: ikon + ad + alt bilgi */ .hz-baslik{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } /* .kart-ikon varsayılan alt boşluğu başlık satırında hizayı bozuyor */ .hz-baslik .kart-ikon{margin-bottom:0} .hz-baslik h2{ font-size:clamp(21px,2.4vw,29px); margin:0; line-height:1.2; } .hz-govde .lead{margin-top:0} .hz-govde .rozetler{margin-top:20px} .hz-govde .cta-btns{margin-top:22px} @media(max-width:719px){ .hz-blok{margin-bottom:44px;padding-bottom:44px} .hz-medya{margin-bottom:20px;border-radius:var(--r-md)} .hz-baslik{gap:11px;margin-bottom:12px} } /* ===================================================================== HİZMETLER — masaüstü iki sütun, dönüşümlü yerleşim Tam genişlik banner her kategoriyi çok büyük bir blok yapıyordu. Görseller sadeleştiği için 520 pikselde rahat okunuyor; yan yana düzen hem dengeli hem daha az yer kaplıyor. ===================================================================== */ @media(min-width:1000px){ .hz-blok{ display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:48px; align-items:center; margin-bottom:58px; padding-bottom:58px; } /* çift sıradaki bloklarda görsel sağa geçer */ .hz-blok:nth-of-type(even) .hz-medya{order:2} .hz-blok:nth-of-type(even) .hz-govde{order:1} .hz-medya{margin-bottom:0;max-width:none} .hz-govde{max-width:none} } @media(min-width:1280px){ .hz-blok{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px} }