/* standalone reset */ blockquote, dl, dd, figure, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ul, ol { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } } /* ============================================================ İLK ADIM SÜNNET — taslak v1 Renk: petrol mavisi + kayısı + nane, soğuk kağıt zemin Tip: Fraunces (display) / Karla (metin) ============================================================ */ :root{ /* Site her cihazda açık temada görünür. Koyu tema tanımları aşağıda duruyor ama ile devre dışı bırakılmış durumda; ileride tema seçici eklenmek istenirse hazır. */ color-scheme: light; /* zemin & yüzey */ --ground: #F4F7F7; --surface: #FFFFFF; --surface-alt: #EAF1F1; --mint: #DCEBEA; --line: #D3E0E0; --line-soft: #E4EDED; /* mürekkep */ --ink: #0F3138; --ink-mid: #3C5A60; --ink-soft: #6A8388; /* marka */ --primary: #14646F; --primary-deep: #0B434C; --primary-tint: #DCEBEA; --accent: #DE8B57; --accent-soft: #FAEADF; --accent-ink: #97522A; /* durum */ --wa: #1FA855; --wa-deep: #157C3E; --flag: #C9861F; --flag-soft: #FBF0D9; --shadow-sm: 0 1px 2px rgba(15,49,56,.05), 0 2px 8px rgba(15,49,56,.04); --shadow-md: 0 2px 6px rgba(15,49,56,.06), 0 12px 32px rgba(15,49,56,.07); --shadow-lg: 0 4px 12px rgba(15,49,56,.07), 0 24px 60px rgba(15,49,56,.10); --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --pad: clamp(1.25rem, 5vw, 4rem); --measure: 63ch; --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --body: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground: #0B1E22; --surface: #10292E; --surface-alt: #16343A; --mint: #16383D; --line: #22474E; --line-soft: #1A3A40; --ink: #E6F0EF; --ink-mid: #A8C2C4; --ink-soft: #7E9CA0; --primary: #5CB8C4; --primary-deep: #8ED4DC; --primary-tint: #16383D; --accent: #EFA875; --accent-soft: #33231A; --accent-ink: #F2BE96; --wa: #38C46F; --wa-deep: #26A557; --flag: #E0AC55; --flag-soft: #2E2717; --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.24); --shadow-md: 0 2px 6px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.30); --shadow-lg: 0 4px 12px rgba(0,0,0,.34), 0 24px 60px rgba(0,0,0,.38); } } :root[data-theme="dark"]{ --ground: #0B1E22; --surface: #10292E; --surface-alt: #16343A; --mint: #16383D; --line: #22474E; --line-soft: #1A3A40; --ink: #E6F0EF; --ink-mid: #A8C2C4; --ink-soft: #7E9CA0; --primary: #5CB8C4; --primary-deep: #8ED4DC; --primary-tint: #16383D; --accent: #EFA875; --accent-soft: #33231A; --accent-ink: #F2BE96; --wa: #38C46F; --wa-deep: #26A557; --flag: #E0AC55; --flag-soft: #2E2717; --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.24); --shadow-md: 0 2px 6px rgba(0,0,0,.32), 0 12px 32px rgba(0,0,0,.30); --shadow-lg: 0 4px 12px rgba(0,0,0,.34), 0 24px 60px rgba(0,0,0,.38); } *{ box-sizing: border-box; } body{ margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.68; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1,h2,h3,h4{ font-family: var(--display); font-optical-sizing: auto; font-weight: 500; line-height: 1.14; letter-spacing: -.015em; text-wrap: balance; margin: 0; color: var(--ink); } p{ margin: 0; } a{ color: inherit; } img{ max-width: 100%; display: block; } ::selection{ background: var(--accent-soft); color: var(--accent-ink); } :focus-visible{ outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ---------- düzen yardımcıları ---------- */ .wrap{ width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--pad); } .band{ padding-block: clamp(3.5rem, 8vw, 7rem); } .band--tint{ background: var(--surface-alt); } .band--deep{ background: var(--primary-deep); } .stack{ display: flex; flex-direction: column; } .gap-xs{ gap: .5rem; } .gap-sm{ gap: .9rem; } .gap-md{ gap: 1.6rem; } .gap-lg{ gap: 2.6rem; } .gap-xl{ gap: clamp(2.5rem, 5vw, 4rem); } .measure{ max-width: var(--measure); } /* ---------- tipografik roller ---------- */ .eyebrow{ font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: .6rem; } .eyebrow .foot{ width: 15px; height: 15px; flex: none; opacity: .85; } .h-xl{ font-size: clamp(2.5rem, 6.4vw, 4.5rem); font-weight: 400; } .h-lg{ font-size: clamp(1.9rem, 4vw, 2.9rem); } .h-md{ font-size: clamp(1.35rem, 2.4vw, 1.75rem); } .h-sm{ font-size: 1.16rem; font-weight: 600; letter-spacing: -.005em; } .lede{ font-size: clamp(1.06rem, 1.7vw, 1.24rem); color: var(--ink-mid); line-height: 1.62; } .muted{ color: var(--ink-mid); } .small{ font-size: .93rem; } .tiny{ font-size: .82rem; color: var(--ink-soft); } /* doldurulacak alan işareti */ .ph{ background: var(--flag-soft); border-bottom: 1.5px dotted var(--flag); padding: 0 .28em; border-radius: 3px 3px 0 0; color: inherit; font-style: normal; } /* ---------- düğmeler ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--body); font-size: .95rem; font-weight: 700; letter-spacing: .01em; padding: .85rem 1.5rem; border-radius: 100px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .btn svg{ width: 18px; height: 18px; flex: none; } .btn:hover{ transform: translateY(-2px); } .btn--wa{ background: var(--wa); color: #fff; box-shadow: var(--shadow-md); } .btn--wa:hover{ background: var(--wa-deep); } .btn--solid{ background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn--solid:hover{ background: var(--primary-deep); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn--solid{ color: #062024; } } :root[data-theme="dark"] .btn--solid{ color: #062024; } .btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover{ border-color: var(--primary); color: var(--primary); } .btn--sm{ padding: .6rem 1.1rem; font-size: .86rem; } /* ============================================================ TASLAK ŞERİDİ ============================================================ */ .draftbar{ background: var(--primary-deep); color: #DCEBEA; font-size: .78rem; letter-spacing: .04em; } .draftbar .wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; padding-block: .55rem; } .draftbar b{ color: #fff; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; } .draftbar span{ opacity: .8; } /* ============================================================ ÜST BAR ============================================================ */ .topbar{ position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .topbar.is-stuck{ border-bottom-color: var(--line); } .topbar .wrap{ display: flex; align-items: center; gap: 1.5rem; padding-block: .85rem; } .brand{ display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-inline-end: auto; } .brand .mark{ width: 40px; height: 40px; border-radius: 12px; background: var(--primary); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-sm); } .brand .mark svg{ width: 21px; height: 21px; } .brand-name{ font-family: var(--display); font-size: 1.16rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; display: block; } .brand-sub{ font-size: .65rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .nav{ display: flex; align-items: center; gap: .3rem; } .nav a{ text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--ink-mid); padding: .5rem .78rem; border-radius: 8px; transition: color .16s ease, background .16s ease; } .nav a:hover{ color: var(--primary); background: var(--primary-tint); } .navtoggle{ display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; color: var(--ink); align-items: center; justify-content: center; } .navtoggle svg{ width: 20px; height: 20px; } @media (max-width: 1080px){ .nav{ position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: .8rem var(--pad) 1.4rem; gap: .1rem; display: none; } .nav.is-open{ display: flex; } .nav a{ padding: .8rem .4rem; font-size: 1rem; border-bottom: 1px solid var(--line-soft); border-radius: 0; } .navtoggle{ display: inline-flex; } .topbar .btn--wa{ display: none; } } /* ============================================================ HERO ============================================================ */ .hero{ position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero::before{ content: ""; position: absolute; top: -28%; right: -14%; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px; background: radial-gradient(circle at 50% 50%, var(--primary-tint) 0%, transparent 66%); opacity: .85; pointer-events: none; } .hero::after{ content: ""; position: absolute; bottom: -30%; left: -18%; width: 46vw; height: 46vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 68%); opacity: .7; pointer-events: none; } .hero .wrap{ position: relative; z-index: 1; } .hero-grid{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } } .hero h1{ font-size: clamp(2.45rem, 6vw, 4.15rem); font-weight: 400; } .hero h1 em{ font-style: italic; font-weight: 500; color: var(--primary); } .hero-cta{ display: flex; flex-wrap: wrap; gap: .8rem; } .hero-note{ display: flex; align-items: center; gap: .55rem; color: var(--ink-soft); font-size: .87rem; } .hero-note svg{ width: 16px; height: 16px; color: var(--primary); flex: none; } /* dört söz kartı */ .promise{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 1.15rem; } .promise-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); } .promise-head .h-sm{ font-family: var(--display); font-size: 1.28rem; font-weight: 600; } .promise-list{ display: flex; flex-direction: column; gap: .1rem; } .promise-item{ display: flex; align-items: flex-start; gap: .95rem; padding: .78rem 0; border-bottom: 1px dashed var(--line-soft); } .promise-item:last-child{ border-bottom: 0; } .promise-item .tick{ width: 26px; height: 26px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; flex: none; margin-top: 1px; } .promise-item .tick svg{ width: 14px; height: 14px; } .promise-item strong{ display: block; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; } .promise-item span{ font-size: .89rem; color: var(--ink-mid); line-height: 1.5; } .promise-foot{ background: var(--mint); border-radius: var(--r-md); padding: .85rem 1rem; font-size: .87rem; color: var(--ink-mid); display: flex; gap: .7rem; align-items: center; } .promise-foot svg{ width: 20px; height: 20px; color: var(--primary); flex: none; } /* ---------- güven şeridi ---------- */ .trust{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .trust .wrap{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; } .trust-cell{ background: var(--surface); padding: 1.5rem clamp(1rem, 2.5vw, 1.8rem) 1.5rem 0; border-inline-start: 1px solid var(--line-soft); } .trust-cell:first-child{ border-inline-start: 0; padding-inline-start: 0; } .trust-cell:not(:first-child){ padding-inline-start: clamp(1rem, 2.5vw, 1.8rem); } display: flex; flex-direction: column; gap: .25rem; } .trust-cell .num{ font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 500; color: var(--primary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .trust-cell .lbl{ font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } @media (max-width: 760px){ .trust .wrap{ grid-template-columns: repeat(2, 1fr); } } /* ============================================================ ORTAK BÖLÜM BAŞLIĞI ============================================================ */ .sec-head{ display: flex; flex-direction: column; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); max-width: 58ch; } .sec-head.center{ margin-inline: auto; text-align: center; align-items: center; } /* ============================================================ DOKTOR ============================================================ */ .doc-grid{ display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 860px){ .doc-grid{ grid-template-columns: 1fr; } } .portrait{ position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); background: linear-gradient(150deg, var(--mint) 0%, var(--surface-alt) 100%); border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: 2rem; overflow: hidden; } .portrait .ghost{ display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--ink-soft); } .portrait .ghost svg{ width: 54px; height: 54px; opacity: .5; } .portrait .ghost span{ font-size: .84rem; letter-spacing: .04em; max-width: 22ch; line-height: 1.5; } .portrait .tag{ position: absolute; bottom: .9rem; left: .9rem; right: .9rem; background: var(--flag-soft); border: 1px dashed var(--flag); color: var(--accent-ink); border-radius: var(--r-md); padding: .5rem .8rem; font-size: .76rem; font-weight: 600; letter-spacing: .03em; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .portrait .tag{ color: var(--flag); } } :root[data-theme="dark"] .portrait .tag{ color: var(--flag); } .cred{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; margin-top: .6rem; } .cred div{ background: var(--surface); padding: 1.05rem 1.2rem; display: flex; flex-direction: column; gap: .2rem; } .cred dt{ font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .cred dd{ margin: 0; font-size: .97rem; font-weight: 500; } .quote{ border-inline-start: 3px solid var(--accent); padding-inline-start: 1.3rem; font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.35rem); font-style: italic; font-weight: 400; line-height: 1.5; color: var(--ink); } /* ============================================================ YÖNTEMLER ============================================================ */ .methods{ display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1.4rem; } .method{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.1rem; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .method:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); } .method-top{ display: flex; align-items: flex-start; gap: .95rem; } .method-ico{ width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--primary-tint); color: var(--primary); } .method-ico svg{ width: 22px; height: 22px; } .method--alt .method-ico{ background: var(--accent-soft); color: var(--accent-ink); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .method--alt .method-ico{ color: var(--accent); } } :root[data-theme="dark"] .method--alt .method-ico{ color: var(--accent); } .method h3{ font-size: 1.35rem; font-weight: 600; } .method .kicker{ font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .speclist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .speclist li{ display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; color: var(--ink-mid); } .speclist svg{ width: 17px; height: 17px; color: var(--primary); flex: none; margin-top: 4px; } .method-meta{ margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: .5rem; } .chip{ font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 100px; background: var(--surface-alt); color: var(--ink-mid); border: 1px solid var(--line-soft); } /* ============================================================ YAŞ GRUPLARI ============================================================ */ .ages{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; } .age{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .6rem; position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .age:hover{ border-color: var(--primary); transform: translateY(-2px); } .age .range{ font-family: var(--display); font-size: 1.55rem; font-weight: 600; color: var(--primary); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .age .title{ font-weight: 700; font-size: .98rem; } .age p{ font-size: .9rem; color: var(--ink-mid); line-height: 1.55; } .age .foot-mark{ position: absolute; top: 1.1rem; right: 1.1rem; width: 26px; height: 26px; color: var(--primary); opacity: .16; } /* ============================================================ SÜREÇ (gerçek sıra — numaralandırma bilgi taşıyor) ============================================================ */ .steps{ display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 0; counter-reset: step; } .step{ padding: 1.8rem 1.5rem 1.8rem 0; border-top: 2px solid var(--primary); display: flex; flex-direction: column; gap: .55rem; position: relative; } .step::before{ counter-increment: step; content: "0" counter(step); font-family: var(--display); font-size: .85rem; font-weight: 700; letter-spacing: .1em; color: var(--primary); font-variant-numeric: tabular-nums; } .step h3{ font-size: 1.14rem; font-weight: 600; } .step p{ font-size: .92rem; color: var(--ink-mid); line-height: 1.55; } .step .dur{ margin-top: .35rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); } /* ============================================================ BAKIM LİSTESİ ============================================================ */ .care-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; } .care{ background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line-soft); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; } .care h3{ font-size: 1.08rem; font-weight: 600; display: flex; align-items: center; gap: .6rem; } .care h3 svg{ width: 19px; height: 19px; flex: none; } .care--do h3 svg{ color: var(--wa); } .care--dont h3 svg{ color: var(--accent); } .care ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .care li{ font-size: .93rem; color: var(--ink-mid); padding-inline-start: 1.1rem; position: relative; line-height: 1.55; } .care li::before{ content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--line); } .care--do li::before{ background: var(--wa); } .care--dont li::before{ background: var(--accent); } /* ============================================================ S.S.S. ============================================================ */ .faq{ display: flex; flex-direction: column; border-top: 1px solid var(--line); } .faq details{ border-bottom: 1px solid var(--line); } .faq summary{ cursor: pointer; list-style: none; padding: 1.25rem .4rem 1.25rem 0; display: flex; align-items: center; gap: 1rem; font-family: var(--display); font-size: clamp(1.02rem, 1.9vw, 1.2rem); font-weight: 600; letter-spacing: -.01em; transition: color .18s ease; } .faq summary::-webkit-details-marker{ display: none; } .faq summary:hover{ color: var(--primary); } .faq summary .plus{ margin-inline-start: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; color: var(--primary); transition: transform .25s ease, background .2s ease, border-color .2s ease; } .faq summary .plus svg{ width: 14px; height: 14px; } .faq details[open] summary .plus{ transform: rotate(45deg); background: var(--primary-tint); border-color: var(--primary-tint); } .faq .answer{ padding: 0 3rem 1.5rem 0; color: var(--ink-mid); font-size: .98rem; max-width: 72ch; } /* ============================================================ YORUMLAR ============================================================ */ .reviews{ display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1.2rem; } .review{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); } .stars{ display: flex; gap: .18rem; color: var(--accent); } .stars svg{ width: 16px; height: 16px; } .review p{ font-size: .95rem; color: var(--ink-mid); line-height: 1.6; } .review footer{ margin-top: auto; display: flex; align-items: center; gap: .7rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); } .review .who{ font-weight: 700; font-size: .92rem; } .review .when{ font-size: .8rem; color: var(--ink-soft); } .avatar{ width: 34px; height: 34px; border-radius: 50%; background: var(--mint); color: var(--primary); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; font-family: var(--display); } /* ============================================================ İLETİŞİM ============================================================ */ .contact-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } } .info-list{ display: flex; flex-direction: column; gap: .1rem; } .info-row{ display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; } .info-row:first-child{ border-top: 1px solid var(--line); } .info-ico{ width: 38px; height: 38px; border-radius: 11px; background: var(--mint); color: var(--primary); display: grid; place-items: center; flex: none; } .info-ico svg{ width: 18px; height: 18px; } .info-row .lbl{ font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; display: block; margin-bottom: .12rem; } .info-row .val{ font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; } a.info-row .val{ transition: color .16s ease; } a.info-row:hover .val{ color: var(--primary); } .hours{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .hours-head{ padding: 1.15rem 1.4rem; background: var(--primary); color: #fff; display: flex; align-items: center; gap: .65rem; font-weight: 700; letter-spacing: .02em; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hours-head{ color: #062024; } } :root[data-theme="dark"] .hours-head{ color: #062024; } .hours-head svg{ width: 18px; height: 18px; } .hours-row{ display: flex; justify-content: space-between; gap: 1rem; padding: .78rem 1.4rem; border-bottom: 1px solid var(--line-soft); font-size: .95rem; } .hours-row:last-of-type{ border-bottom: 0; } .hours-row .day{ color: var(--ink-mid); } .hours-row .time{ font-weight: 600; font-variant-numeric: tabular-nums; } .hours-row.closed .time{ color: var(--accent); } .hours-foot{ padding: 1rem 1.4rem 1.3rem; border-top: 1px dashed var(--line); font-size: .87rem; color: var(--ink-mid); } .map{ margin-top: 1.4rem; border-radius: var(--r-lg); border: 1px dashed var(--line); background: repeating-linear-gradient(45deg, var(--surface-alt) 0 14px, transparent 14px 28px), var(--surface); min-height: 190px; display: grid; place-items: center; text-align: center; padding: 1.6rem; gap: .7rem; } .map svg{ width: 30px; height: 30px; color: var(--primary); } /* ============================================================ KAPANIŞ CTA ============================================================ */ .closer{ background: var(--primary-deep); color: #E4F1F1; border-radius: var(--r-xl); padding: clamp(2.2rem, 5vw, 3.6rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; position: relative; overflow: hidden; } .closer::after{ content: ""; position: absolute; right: -60px; bottom: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(222,139,87,.24) 0%, transparent 65%); pointer-events: none; } .closer h2{ color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); } .closer p{ color: #B9D6D6; max-width: 46ch; margin-top: .7rem; } .closer .actions{ display: flex; flex-direction: column; gap: .7rem; position: relative; z-index: 1; } @media (max-width: 820px){ .closer{ grid-template-columns: 1fr; } } /* ============================================================ TESLİM NOTU (müşteriye) ============================================================ */ .handoff{ border: 1.5px dashed var(--flag); background: var(--flag-soft); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; gap: 1.2rem; } .handoff h2{ font-size: 1.4rem; font-weight: 600; } .handoff-cols{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; } .handoff h3{ font-family: var(--body); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); margin-bottom: .6rem; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .handoff h3{ color: var(--flag); } } :root[data-theme="dark"] .handoff h3{ color: var(--flag); } .handoff ul{ margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .4rem; } .handoff li{ font-size: .93rem; color: var(--ink-mid); } /* ============================================================ FOOTER ============================================================ */ .footer{ background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; margin-top: clamp(3rem, 6vw, 5rem); } .footer-grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line-soft); } @media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; } } .footer h4{ font-family: var(--body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: .9rem; } .footer ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .footer ul a{ text-decoration: none; font-size: .94rem; color: var(--ink-mid); transition: color .16s ease; } .footer ul a:hover{ color: var(--primary); } .disclaimer{ padding-top: 1.6rem; font-size: .82rem; color: var(--ink-soft); line-height: 1.6; max-width: 90ch; } .footer-base{ display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; padding-top: 1.4rem; margin-top: 1.4rem; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--ink-soft); } .social{ display: flex; gap: .5rem; } .social a{ width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-mid); transition: color .18s ease, border-color .18s ease, transform .18s ease; } .social a:hover{ color: var(--primary); border-color: var(--primary); transform: translateY(-2px); } .social svg{ width: 18px; height: 18px; } /* ============================================================ SABİT WHATSAPP ============================================================ */ .float-wa{ position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 80; background: var(--wa); color: #fff; border-radius: 100px; padding: .85rem 1.3rem; display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; font-size: .93rem; box-shadow: 0 8px 28px rgba(31,168,85,.36); transition: transform .2s ease, background .2s ease; } .float-wa:hover{ transform: translateY(-3px); background: var(--wa-deep); } .float-wa svg{ width: 21px; height: 21px; } @media (max-width: 520px){ .float-wa .txt{ display: none; } .float-wa{ padding: 1rem; border-radius: 50%; } } /* ============================================================ HAREKET ============================================================ */ .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in{ opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition-duration: .01ms !important; } .reveal{ opacity: 1; transform: none; } } /* ============================================================ ÇOK SAYFALI SÜRÜM — EK BİLEŞENLER (taslak v2) ============================================================ */ /* ---------- artı / eksi düğmesi (akordiyonlar) ---------- */ .pm{ position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); transition: transform .28s cubic-bezier(.2,.7,.3,1), background .2s ease, border-color .2s ease; } .pm::before, .pm::after{ content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; background: currentColor; border-radius: 2px; } .pm::before{ width: 13px; height: 2.2px; } .pm::after{ width: 2.2px; height: 13px; transition: opacity .2s ease; } [open] > summary > .pm, [open] > summary > .topics-bar > .pm{ transform: rotate(180deg); background: var(--primary-tint); border-color: var(--primary-tint); } [open] > summary > .pm::after, [open] > summary > .topics-bar > .pm::after{ opacity: 0; } /* ============================================================ KONU BAŞLIKLARI — bar üstünde grup menüsü, "+" ile açılan panel ============================================================ */ .topics{ position: relative; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); } .topics-bar{ display: flex; align-items: center; gap: .2rem 1.1rem; min-height: 54px; } .topics-toggle{ display: inline-flex; align-items: center; gap: .8rem; flex: none; padding: .8rem 1.1rem .8rem 0; background: none; border: 0; border-inline-end: 1px solid var(--line); cursor: pointer; color: var(--ink); } .topics-toggle .pm{ color: var(--primary); } .topics-toggle:hover .pm{ border-color: var(--primary); } .topics-toggle[aria-expanded="true"] .pm{ transform: rotate(180deg); background: var(--primary-tint); border-color: var(--primary-tint); } .topics-toggle[aria-expanded="true"] .pm::after{ opacity: 0; } .topics-label{ font-family: var(--body); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } /* ---------- grup adları: yatay menü ---------- */ .topics-menu{ display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .topics-menu::-webkit-scrollbar{ display: none; } .topics-tab{ position: relative; flex: none; background: none; border: 0; cursor: pointer; white-space: nowrap; font-family: var(--body); font-size: .88rem; font-weight: 500; color: var(--ink-mid); padding: 1rem .7rem; transition: color .16s ease; } .topics-tab::after{ content: ""; position: absolute; inset: auto .7rem -1px .7rem; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); opacity: 0; transition: opacity .18s ease; } .topics-tab:hover{ color: var(--primary); } .topics-tab.is-active{ color: var(--primary); font-weight: 700; } .topics-tab.is-active::after{ opacity: 1; } /* ---------- açılan panel ---------- */ .topics-panel{ border-top: 1px solid var(--line-soft); background: var(--surface-alt); animation: topics-in .3s cubic-bezier(.2,.7,.3,1); } @keyframes topics-in{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } } .topics-cols{ padding-block: clamp(1.3rem, 3vw, 2rem); } .topics-group.is-hidden{ display: none; } .topics-group ul{ list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 1.6rem; } .topics-group li{ break-inside: avoid; } .topics-group a{ display: block; text-decoration: none; color: var(--ink-mid); font-size: .93rem; padding: .5rem .7rem; border-radius: 8px; transition: color .16s ease, background .16s ease; } .topics-group a:hover{ color: var(--primary); background: var(--primary-tint); } @media (max-width: 640px){ .topics-bar{ flex-wrap: wrap; min-height: 0; } .topics-toggle{ border-inline-end: 0; padding-inline-end: 0; } .topics-menu{ order: 3; flex-basis: 100%; border-top: 1px solid var(--line-soft); margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } .topics-tab{ padding-block: .8rem; } } /* ============================================================ MOBİL MENÜ İÇİNDEKİ KONU BAŞLIKLARI Dar ekranda üstteki yatay konu barı gizlenir, gruplar hamburger menünün içine akordiyon olarak taşınır. ============================================================ */ .nav-topics{ display: none; } @media (max-width: 1080px){ .topics{ display: none; } .nav{ max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; } .nav-topics{ display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .nav-topics-title{ display: block; font-family: var(--body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding: 0 .4rem .5rem; } .nav-topic{ border-bottom: 1px solid var(--line-soft); } .nav-topic > summary{ display: flex; align-items: center; gap: .8rem; cursor: pointer; list-style: none; padding: .8rem .4rem; font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); } .nav-topic > summary::-webkit-details-marker{ display: none; } .nav-topic > summary span{ flex: 1; } .nav-topic > summary .pm{ width: 24px; height: 24px; color: var(--primary); } .nav-topic > summary .pm::before{ width: 11px; height: 2px; } .nav-topic > summary .pm::after{ width: 2px; height: 11px; } .nav-topic ul{ list-style: none; margin: 0; padding: 0 0 .7rem .4rem; display: flex; flex-direction: column; gap: .1rem; } .nav-topics a{ display: block; padding: .55rem .7rem; font-size: .93rem; font-weight: 400; color: var(--ink-mid); border: 0; border-radius: 8px; text-decoration: none; } .nav-topics a:hover{ color: var(--primary); background: var(--primary-tint); } } /* ============================================================ YAN SÜTUN AKORDİYONU ============================================================ */ .side-group > summary{ cursor: pointer; list-style: none; display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; color: var(--ink); } .side-group > summary::-webkit-details-marker{ display: none; } .side-group > summary span{ flex: 1; } .side-group > summary .pm{ width: 24px; height: 24px; color: var(--primary); } .side-group > summary .pm::before{ width: 11px; height: 2px; } .side-group > summary .pm::after{ width: 2px; height: 11px; } .side-group > summary:hover{ color: var(--primary); } .side-group ul{ list-style: none; padding: 0 1rem .9rem; margin: 0; display: flex; flex-direction: column; gap: .1rem; } .side-group a{ display: block; text-decoration: none; color: var(--ink-mid); font-size: .9rem; padding: .42rem .55rem; border-radius: 7px; transition: color .16s ease, background .16s ease; } .side-group a:hover{ color: var(--primary); background: var(--primary-tint); } .side-group a.is-active{ color: var(--primary); background: var(--primary-tint); font-weight: 600; } /* ============================================================ SAYFA BAŞLIĞI + SAYFA YOLU ============================================================ */ .pagehead{ position: relative; overflow: hidden; background: var(--surface-alt); border-bottom: 1px solid var(--line); padding-block: clamp(1.1rem, 3vw, 1.6rem) clamp(2.4rem, 6vw, 4rem); } .pagehead::before{ content: ""; position: absolute; top: -55%; right: -10%; width: 54vw; height: 54vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle at 50% 50%, var(--primary-tint) 0%, transparent 68%); opacity: .9; pointer-events: none; } .pagehead .wrap{ position: relative; z-index: 1; } .pagehead-body{ max-width: 62ch; margin-top: clamp(1.2rem, 3vw, 2rem); } .pagehead h1{ font-family: var(--display); font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; margin-top: .7rem; } .pagehead .lede{ margin-top: 1rem; } .crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink-soft); } .crumbs a{ color: var(--ink-soft); text-decoration: none; } .crumbs a:hover{ color: var(--primary); text-decoration: underline; } .crumbs i{ font-style: normal; opacity: .55; } .crumbs span[aria-current]{ color: var(--ink-mid); font-weight: 600; } /* ============================================================ HASTALIK KARTLARI ============================================================ */ .dcards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1.1rem; } .dcard{ position: relative; display: flex; flex-direction: column; gap: .55rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .dcard::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--primary); opacity: 0; transition: opacity .2s ease; } .dcard:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); } .dcard:hover::before{ opacity: 1; } .dcard h3{ font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; } .dcard h3 a{ color: var(--ink); text-decoration: none; } .dcard h3 a::after{ content: ""; position: absolute; inset: 0; } .dcard:hover h3 a{ color: var(--primary); } .dcard p{ color: var(--ink-mid); font-size: .92rem; line-height: 1.6; flex: 1; } .dcard-more{ display: inline-flex; align-items: center; gap: .4rem; color: var(--primary); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .dcard-more svg{ width: 15px; height: 15px; transition: transform .2s ease; } .dcard:hover .dcard-more svg{ transform: translateX(3px); } /* ---------- grup başlığı ---------- */ .group-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; padding-bottom: .9rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .group-head h2{ font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; } .group-head p{ color: var(--ink-soft); font-size: .92rem; max-width: 58ch; flex: 1 1 320px; } /* ============================================================ İKON KARELERİ (hızlı erişim) ============================================================ */ .tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1rem; } .tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; text-align: center; text-decoration: none; min-height: 148px; padding: 1.2rem .9rem; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .tile:hover{ transform: translateY(-4px); background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-md); } .tile-ico{ width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); transition: background .2s ease, color .2s ease; } .tile-ico svg{ width: 23px; height: 23px; } .tile:hover .tile-ico{ background: rgba(255,255,255,.18); color: #fff; } .tile span:last-child{ font-family: var(--display); font-size: .98rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } /* ============================================================ MAKALE DÜZENİ (hastalık sayfaları) ============================================================ */ .band--flush{ padding-block: clamp(2.5rem, 6vw, 4.5rem); } .article-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 310px); gap: clamp(2rem, 5vw, 3.4rem); align-items: start; } @media (max-width: 940px){ .article-grid{ grid-template-columns: 1fr; } } .prose{ max-width: 72ch; } .prose > * + *{ margin-top: 1.15rem; } .prose h2{ font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 1.72rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line-soft); } .prose h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; } .prose h3{ font-family: var(--display); font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; margin-top: 1.9rem; } .prose p{ color: var(--ink-mid); font-size: 1.005rem; line-height: 1.72; } .prose .lede{ color: var(--ink); } .prose strong{ color: var(--ink); font-weight: 600; } .prose a{ color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .prose ul, .prose ol{ padding-inline-start: 1.15rem; display: flex; flex-direction: column; gap: .55rem; color: var(--ink-mid); font-size: 1rem; line-height: 1.65; } .prose li::marker{ color: var(--primary); } .prose ul.checks{ list-style: none; padding-inline-start: 0; } .prose ul.checks li{ position: relative; padding-inline-start: 1.9rem; } .prose ul.checks li::before{ content: ""; position: absolute; inset-inline-start: 0; top: .42em; width: 15px; height: 9px; border-inline-start: 2.4px solid var(--primary); border-bottom: 2.4px solid var(--primary); rotate: -45deg; border-radius: 1px; } /* ---------- bilgi kutuları ---------- */ .callout{ display: flex; gap: 1rem; padding: 1.2rem 1.3rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: .95rem; line-height: 1.62; color: var(--ink-mid); } .callout > svg{ flex: none; width: 22px; height: 22px; margin-top: .18rem; color: var(--primary); } .callout b{ color: var(--ink); } .callout > span > b:first-child{ display: block; margin-bottom: .25rem; } .callout ul{ padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .35rem; } .callout li::marker{ color: currentColor; } .callout--warn{ background: var(--flag-soft); border-color: color-mix(in srgb, var(--flag) 34%, transparent); } .callout--warn > svg{ color: var(--flag); } .callout--urgent{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .callout--urgent > svg{ color: var(--accent-ink); } .callout--urgent b{ color: var(--accent-ink); } .factbox{ background: var(--mint); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.3rem 1.4rem; } .factbox h3{ margin-top: 0; } .factbox dl{ display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin-top: .8rem; font-size: .93rem; } .factbox dt{ color: var(--ink-soft); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding-top: .18rem; } .factbox dd{ color: var(--ink-mid); } /* ---------- makale sonu: ilgili konular ---------- */ .related{ margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .related ul{ list-style: none; padding: 0; margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; } .related a{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; text-decoration: none; color: var(--ink-mid); font-size: .92rem; padding: .7rem .9rem; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); transition: color .16s ease, border-color .16s ease, transform .16s ease; } .related a:hover{ color: var(--primary); border-color: var(--primary); transform: translateX(2px); } .related a svg{ width: 16px; height: 16px; flex: none; } /* ============================================================ YAN SÜTUN ============================================================ */ .sidebar{ position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1.1rem; } @media (max-width: 940px){ .sidebar{ position: static; } } .side-card{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 1.2rem 1rem; box-shadow: var(--shadow-sm); } .side-title{ font-family: var(--body); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); padding: 0 1rem .8rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .5rem; } .side-group{ border: 0; } .side-group + .side-group{ border-top: 1px solid var(--line-soft); } .side-cta{ background: var(--primary-deep); border-radius: var(--r-lg); padding: 1.4rem; color: #DCEBEA; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; } .side-cta-eyebrow{ font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #8ED4DC; } .side-cta p{ font-size: .92rem; line-height: 1.6; } .side-phone{ display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; } .side-phone svg{ width: 16px; height: 16px; } .side-phone:hover{ text-decoration: underline; } /* ============================================================ KÜÇÜK DÜZELTMELER ============================================================ */ .nav a.is-active{ color: var(--primary); background: var(--primary-tint); } .footer-grid{ grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } @media (max-width: 1040px){ .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px){ .footer-grid{ grid-template-columns: 1fr; } } .info-list--compact{ margin-top: 1.2rem; } .info-list--compact .info-row{ padding: .6rem 0; } .sec-head--center{ text-align: center; margin-inline: auto; } .sec-head--center .lede{ margin-inline: auto; } .cols-2{ columns: 2 300px; column-gap: 2.4rem; } .cols-2 > *{ break-inside: avoid; } .hours--card{ background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }