/* ════════════════════════════════════════════════════════════ ÇAKMAK LAW — SHARED PREMIUM OVERRIDES Tüm sayfalara link'lenir. Inline stillerin SONRA gelir. ════════════════════════════════════════════════════════════ Tema renkleri CSS değişkenlerle. Her sayfa kendi ile renk paletini değiştirebilir. ════════════════════════════════════════════════════════════ */ /* ═══════ Fonts ═══════ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap'); /* ═══════ Tema palet sistemi ═══════ */ :root,body{ /* Default: kırmızı (index, akademi) */ --nav-c1:#910000; /* light top */ --nav-c2:#7a0000; /* mid */ --nav-c3:#5d0000; /* dark bottom */ --nav-deep1:#5d0000; --nav-deep2:#3d0000; --nav-shadow-rgb:60,0,0; --nav-deep-shadow-rgb:20,0,0; --nav-accent-rgb:201,167,106; /* altın (her sayfada aynı kalır — uyum için) */ --nav-btn-text:#910000; --nav-btn-text-hover:#7a0000; /* ── Tipografi ── */ --font-display:'Playfair Display',Georgia,serif; --font-body:'Inter',system-ui,sans-serif; --font-ui:'Montserrat',system-ui,sans-serif; --font-size-xs:0.75rem; /* 12px */ --font-size-sm:0.875rem; /* 14px */ --font-size-base:1rem; /* 16px */ --font-size-lg:1.125rem; /* 18px */ --font-size-xl:1.25rem; /* 20px */ --font-size-2xl:1.5rem; /* 24px */ --font-size-3xl:1.875rem; /* 30px */ --font-size-4xl:2.25rem; /* 36px */ --font-size-5xl:3rem; /* 48px */ --font-size-6xl:3.75rem; /* 60px */ --font-size-7xl:4.5rem; /* 72px */ --line-height-tight:1.2; --line-height-snug:1.375; --line-height-normal:1.6; --line-height-relaxed:1.75; --tracking-tight:-0.02em; --tracking-normal:0em; --tracking-wide:0.06em; --tracking-wider:0.12em; --tracking-widest:0.22em; /* ── Spacing ── */ --space-xs:0.25rem; /* 4px */ --space-sm:0.5rem; /* 8px */ --space-md:1rem; /* 16px */ --space-lg:1.5rem; /* 24px */ --space-xl:2rem; /* 32px */ --space-2xl:3rem; /* 48px */ --space-3xl:4rem; /* 64px */ --space-4xl:6rem; /* 96px */ /* ── Shadow scale ── */ --shadow-sm:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06); --shadow-md:0 4px 12px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.07); --shadow-lg:0 10px 28px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.08); --shadow-xl:0 20px 48px rgba(0,0,0,.15),0 8px 20px rgba(0,0,0,.10); --shadow-gold:0 4px 20px rgba(201,167,106,.25),0 1px 4px rgba(201,167,106,.15); --shadow-crimson:0 4px 20px rgba(145,0,0,.22),0 1px 4px rgba(145,0,0,.12); /* ── Border radius ── */ --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-xl:24px; --radius-full:9999px; /* ── Brand colors (solid) ── */ --color-crimson:#910000; --color-crimson-dark:#6b0000; --color-gold:#c9a76a; --color-gold-light:#e8d4a8; --color-ink:#1a1614; --color-ink-muted:#4a3f3a; --color-surface:#faf9f7; --color-border:rgba(26,22,20,.10); } body[data-theme="gold"]{ --nav-c1:#a07020; --nav-c2:#7a4f0a; --nav-c3:#4f3206; --nav-deep1:#4f3206; --nav-deep2:#2e1d04; --nav-shadow-rgb:60,40,4; --nav-deep-shadow-rgb:20,12,2; --nav-btn-text:#7a4f0a; --nav-btn-text-hover:#5c3a07; } body[data-theme="navy"]{ --nav-c1:#2a3e8c; --nav-c2:#1e2d6b; --nav-c3:#11194a; --nav-deep1:#11194a; --nav-deep2:#080d28; --nav-shadow-rgb:0,10,40; --nav-deep-shadow-rgb:0,5,20; --nav-btn-text:#1e2d6b; --nav-btn-text-hover:#11194a; } body[data-theme="blue"]{ --nav-c1:#1d4ed8; --nav-c2:#1e40af; --nav-c3:#1e3a8a; --nav-deep1:#1e3a8a; --nav-deep2:#0f1f4d; --nav-shadow-rgb:0,20,60; --nav-deep-shadow-rgb:0,10,30; --nav-btn-text:#1e40af; --nav-btn-text-hover:#1e3a8a; } body[data-theme="green"]{ --nav-c1:#1f7a4d; --nav-c2:#155f3b; --nav-c3:#0d4527; --nav-deep1:#0d4527; --nav-deep2:#062818; --nav-shadow-rgb:0,40,20; --nav-deep-shadow-rgb:0,20,10; --nav-btn-text:#155f3b; --nav-btn-text-hover:#0d4527; } body[data-theme="teal"]{ --nav-c1:#0e7c8b; --nav-c2:#0a6470; --nav-c3:#054752; --nav-deep1:#054752; --nav-deep2:#022a31; --nav-shadow-rgb:0,30,40; --nav-deep-shadow-rgb:0,15,20; --nav-btn-text:#0a6470; --nav-btn-text-hover:#054752; } body[data-theme="purple"]{ --nav-c1:#6b2bce; --nav-c2:#54219f; --nav-c3:#3b1772; --nav-deep1:#3b1772; --nav-deep2:#220c44; --nav-shadow-rgb:30,10,60; --nav-deep-shadow-rgb:15,5,30; --nav-btn-text:#54219f; --nav-btn-text-hover:#3b1772; } /* ═══════ 1) NAV — Crimson couture (tema değişkenli) ═══════ */ .nav{ position:sticky!important;top:0!important;z-index:200!important; background:linear-gradient(180deg,var(--nav-c1) 0%,var(--nav-c2) 60%,var(--nav-c3) 100%)!important; backdrop-filter:blur(18px) saturate(140%)!important; -webkit-backdrop-filter:blur(18px) saturate(140%)!important; border-bottom:1px solid rgba(0,0,0,.28)!important; box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 8px 28px rgba(var(--nav-shadow-rgb),.22), 0 1px 0 rgba(var(--nav-accent-rgb),.22)!important; } .nav::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--nav-accent-rgb),.55) 50%,transparent); pointer-events:none; } .nav.scrolled{ background:linear-gradient(180deg,var(--nav-c2) 0%,var(--nav-c3) 100%)!important; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 40px rgba(var(--nav-shadow-rgb),.32), 0 1px 0 rgba(var(--nav-accent-rgb),.30)!important; } /* Brand on red */ .nav .brand{ background:transparent!important; border-right:1px solid rgba(255,243,236,.18)!important; box-shadow:none!important; } .nav .brand-em{background:transparent!important;border-color:transparent!important;color:#fff!important} .nav .brand-logo-img{filter:brightness(0) invert(1)!important;opacity:.95} .nav .brand-name{ color:#fff!important; letter-spacing:.08em!important; text-shadow:0 1px 0 rgba(0,0,0,.18); } .nav .brand-tag{color:rgba(255,238,220,.62)!important;letter-spacing:.24em!important} /* Nav links */ .nav .nav-links{background:transparent!important;border-color:transparent!important;box-shadow:none!important} .nav .nav-links li+li::before{background:rgba(255,243,236,.18)!important} .nav .nav-links a{ color:rgba(255,243,236,.78)!important; border-color:transparent!important; letter-spacing:.10em!important; font-weight:700!important; transition:color .25s cubic-bezier(.16,1,.3,1)!important; } .nav .nav-links a:hover{color:#fff!important;background:transparent!important;border-color:transparent!important} .nav .nav-links a.current{color:#fff!important} .nav .nav-links a::after{ background:linear-gradient(90deg,transparent,rgba(var(--nav-accent-rgb),1) 50%,transparent)!important; height:1.5px!important;bottom:6px!important; } .nav .nav-links a:hover::after,.nav .nav-links a.current::after{transform:scaleX(1)!important} /* WA + CTA */ .nav .nav-wa{ border:1px solid rgba(255,243,236,.22)!important; color:rgba(255,243,236,.85)!important; background:rgba(255,255,255,.04)!important; transition:all .22s ease!important; } .nav .nav-wa:hover{ border-color:rgba(37,211,102,.6)!important;color:#25d366!important; background:rgba(37,211,102,.12)!important; } .nav .nav-act .btn-gold{ background:#fff!important;color:var(--nav-btn-text)!important; box-shadow:0 6px 16px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.6) inset!important; font-weight:800!important; } .nav .nav-act .btn-gold:hover{ background:#fffbf2!important;color:var(--nav-btn-text-hover)!important; box-shadow: 0 0 0 2px rgba(var(--nav-accent-rgb),.55), 0 10px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.7) inset!important; transform:translateY(-1px)!important; } /* ═══════ 2) NAV.morphed — derin & kompakt ═══════ */ .nav.morphed{ padding:2px 0!important; background:linear-gradient(180deg,var(--nav-deep1) 0%,var(--nav-deep2) 100%)!important; border-bottom:1px solid rgba(0,0,0,.45)!important; backdrop-filter:blur(22px) saturate(160%)!important; -webkit-backdrop-filter:blur(22px) saturate(160%)!important; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 44px rgba(var(--nav-deep-shadow-rgb),.50), 0 1px 0 rgba(var(--nav-accent-rgb),.42)!important; } .nav.morphed::after{ background:linear-gradient(90deg,transparent,rgba(var(--nav-accent-rgb),.75) 50%,transparent)!important; height:1.5px!important; } .nav.morphed .topbar{display:none!important} .nav.morphed .nav-links a{color:rgba(255,243,236,.82)!important} .nav.morphed .nav-links a:hover{color:#fff!important} .nav.morphed .nav-links li+li::before{background:rgba(255,243,236,.18)!important} .nav.morphed .brand{border-right-color:rgba(255,243,236,.20)!important} .nav.morphed .brand-em{background:transparent!important;color:#fff!important;border-color:transparent!important} .nav.morphed .brand-logo-img{filter:brightness(0) invert(1)!important;opacity:.95} .nav.morphed .brand-name{color:#fff!important} .nav.morphed .brand-tag{display:block;color:rgba(255,238,220,.55)!important} /* ── Submenu (Hakkımızda → Ekibimiz vb.) ── */ .nav .nav-links li.menu-item-has-children{position:relative} .nav .nav-links li.menu-item-has-children > a::before{ content:"";display:inline-block;width:0;height:0; border-left:3.5px solid transparent;border-right:3.5px solid transparent; border-top:4px solid currentColor;opacity:.55; margin-right:6px;vertical-align:middle;transform:translateY(-1px); } .nav .nav-links .sub-menu{ position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%) translateY(8px); min-width:200px;list-style:none;margin:0;padding:8px 0; background:rgba(20,8,8,.96); border:1px solid rgba(255,243,236,.10); border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.45); opacity:0;pointer-events:none; transition:opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1); z-index:50; } .nav .nav-links li.menu-item-has-children:hover > .sub-menu, .nav .nav-links li.menu-item-has-children:focus-within > .sub-menu{ opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0); } .nav .nav-links .sub-menu li{display:block;margin:0;padding:0} .nav .nav-links .sub-menu li+li::before{display:none!important} .nav .nav-links .sub-menu a{ display:block;padding:10px 18px!important; font-size:12.5px!important;letter-spacing:.06em!important; color:rgba(255,243,236,.78)!important;text-transform:none!important; border-radius:0!important; } .nav .nav-links .sub-menu a::after{display:none!important} .nav .nav-links .sub-menu a:hover{ color:#fff!important;background:rgba(201,162,92,.10)!important; } .nav.morphed .nav-wa{border-color:rgba(255,243,236,.22)!important;color:rgba(255,243,236,.85)!important} .nav.morphed .nav-act .btn-gold{background:#fff!important;color:var(--nav-btn-text)!important} .nav.morphed .nav-act .btn-gold:hover{background:#fffbf2!important;color:var(--nav-btn-text-hover)!important} /* ═══════ 3) MOBILE — Hamburger + Drawer ═══════ */ .nav .hamburger{ background:rgba(255,255,255,.10)!important; border:1px solid rgba(255,243,236,.28)!important; width:46px!important;height:46px!important; border-radius:6px!important; transition:background .25s ease, border-color .25s ease!important; } .nav .hamburger:hover{ background:rgba(255,255,255,.18)!important; border-color:rgba(201,167,106,.55)!important; } .nav .hamburger span{background:#fff!important;height:1.8px!important;border-radius:1px} .nav .hamburger.open{background:rgba(255,255,255,.18)!important} /* Mobile drawer — premium tema renginde */ .mob-menu{ background:linear-gradient(180deg,var(--nav-c2) 0%,var(--nav-deep2) 100%)!important; backdrop-filter:blur(24px) saturate(140%)!important; -webkit-backdrop-filter:blur(24px) saturate(140%)!important; padding:96px 28px 40px!important; position:fixed!important;inset:0!important;z-index:198!important; } .mob-menu::before{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(var(--nav-accent-rgb),.65) 50%,transparent); pointer-events:none; } .mob-menu::after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 60% 40% at 50% 0%,rgba(var(--nav-accent-rgb),.10),transparent 60%), radial-gradient(ellipse 80% 60% at 50% 110%,rgba(0,0,0,.30),transparent 65%); } .mob-menu > *{position:relative;z-index:1} .mob-menu a{ padding:18px 4px!important; border-bottom:1px solid rgba(255,243,236,.14)!important; font-family:'Montserrat',sans-serif!important; font-size:16px!important;font-weight:700!important; color:rgba(255,243,236,.92)!important; text-transform:uppercase!important;letter-spacing:.08em!important; text-decoration:none!important; transition:color .25s ease, padding-left .25s ease, background .25s ease!important; } .mob-menu a:hover{ color:#fff!important; padding-left:14px!important; background:linear-gradient(90deg,rgba(var(--nav-accent-rgb),.12),transparent)!important; } .mob-menu a::before{ content:"";display:inline-block;width:0;height:1px;background:rgba(var(--nav-accent-rgb),1); vertical-align:middle;margin-right:0;transition:width .25s ease, margin-right .25s ease; } .mob-menu a:hover::before{width:18px;margin-right:10px} .mob-menu .mob-menu-cta{ margin-top:24px!important; background:#fff!important;color:var(--nav-btn-text)!important; padding:16px 24px!important; text-align:center!important; font-size:14px!important;letter-spacing:.10em!important; border:none!important;border-radius:6px!important; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px rgba(0,0,0,.30)!important; font-weight:800!important; } .mob-menu .mob-menu-cta:hover{ background:#fffbf2!important;color:var(--nav-btn-text-hover)!important; padding-left:24px!important; } .mob-menu .mob-menu-cta::before{display:none!important} /* ═══════ 4) Global typography ═══════ */ body{ font-family:var(--font-body)!important; font-size:var(--font-size-base)!important; line-height:var(--line-height-normal)!important; color:var(--color-ink)!important; -webkit-font-smoothing:antialiased!important; -moz-osx-font-smoothing:grayscale!important; } h1,h2,h3,.section-title,.hero-title,.card-title,[class*="heading"]{ font-family:var(--font-display)!important; line-height:var(--line-height-tight)!important; letter-spacing:var(--tracking-tight)!important; font-weight:600!important; } h4,h5,h6,.label,.tag,.eyebrow{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-wider)!important; } p{ font-family:var(--font-body)!important; line-height:var(--line-height-relaxed)!important; } /* ═══════ 5) Performans yardımcıları ═══════ */ img{content-visibility:auto;contain-intrinsic-size:auto 200px} iframe{content-visibility:auto;contain-intrinsic-size:auto 300px} /* ═══════ Mobile responsive — nav iyileştirme ═══════ */ @media (max-width:900px){ .nav .nav-in{padding:8px 0!important;grid-template-columns:auto auto auto!important;gap:8px!important} .nav .brand{padding-right:14px!important} .nav .brand-em{width:36px!important;height:36px!important} .nav .brand-name{font-size:12px!important;letter-spacing:.06em!important} .nav .brand-tag{font-size:7.5px!important;letter-spacing:.18em!important} .nav nav,.nav .nav-links,.nav .nav-act .btn,.nav .nav-wa{display:none!important} .nav .nav-act{justify-content:flex-end!important;gap:0!important} .nav .hamburger{display:flex!important;flex-direction:column;justify-content:center;gap:5px} } @media (max-width:480px){ .topbar{font-size:10.5px!important;padding:0!important} .topbar-in{gap:8px!important;padding:6px 0!important} .topbar-left{gap:8px!important;flex:1;flex-wrap:nowrap;overflow:hidden} .topbar-left a:nth-of-type(n+3){display:none!important} .nav .brand-tag{display:none!important} } /* ═══════ Reduce motion respect ═══════ */ @media (prefers-reduced-motion:reduce){ .mob-menu,.nav,.nav .nav-links a,.mob-menu a{transition:none!important} } /* ════════════════════════════════════════════════════════════ PHASE 5 — GLOBAL COMPONENTS ════════════════════════════════════════════════════════════ */ /* 5.1 — Button system */ .btn{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-wide)!important; font-weight:700!important; border-radius:var(--radius-sm)!important; } /* Primary: crimson */ .btn-gold:not(.hero-acts .btn-gold){ background:var(--color-crimson)!important; color:#fff!important; box-shadow:var(--shadow-crimson)!important; border:1px solid rgba(145,0,0,.0)!important; transition:all .28s cubic-bezier(.16,1,.3,1)!important; } .btn-gold:not(.hero-acts .btn-gold):hover{ background:var(--color-crimson-dark)!important; box-shadow:0 0 0 3px rgba(145,0,0,.15), var(--shadow-lg)!important; transform:translateY(-2px)!important; } /* Secondary: ghost */ .btn-ghost:not(.hero-acts .btn-ghost){ background:transparent!important; border:1.5px solid rgba(145,0,0,.28)!important; color:var(--color-crimson)!important; transition:all .28s cubic-bezier(.16,1,.3,1)!important; } .btn-ghost:not(.hero-acts .btn-ghost):hover{ background:rgba(145,0,0,.04)!important; border-color:var(--color-crimson)!important; transform:translateY(-2px)!important; } /* 5.2 — Section gold separator */ .sec-head::after{ content:""!important; display:block!important; width:40px!important; height:2px!important; background:linear-gradient(90deg,var(--color-gold),rgba(201,167,106,.3))!important; margin:16px auto 0!important; border-radius:1px!important; } .sec-head.rv:not(.on)::after{ opacity:0!important; } .sec-head.on::after{ animation:goldLineGrow .6s .3s cubic-bezier(.16,1,.3,1) both!important; } @keyframes goldLineGrow{ from{ width:0; opacity:0; } to{ width:40px; opacity:1; } } /* 5.4 — Footer refinements */ footer{ border-top:1px solid rgba(201,167,106,.18)!important; } footer::before{ content:""!important; display:block!important; height:1px!important; background:linear-gradient(90deg,transparent,rgba(201,167,106,.35) 50%,transparent)!important; margin-bottom:0!important; } .foot-label{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-widest)!important; color:var(--color-gold)!important; font-size:9px!important; margin-bottom:16px!important; } .foot-links a{ font-family:var(--font-body)!important; font-size:var(--font-size-sm)!important; color:rgba(219,209,203,.70)!important; transition:color .2s ease, gap .2s ease!important; display:flex!important; align-items:center!important; gap:0px!important; } .foot-links a::before{ content:"→"!important; font-size:10px!important; opacity:0!important; margin-right:0!important; transition:opacity .2s ease, margin-right .2s ease!important; color:var(--color-gold)!important; } .foot-links a:hover{ color:#fff!important; padding-left:0!important; } .foot-links a:hover::before{ opacity:1!important; margin-right:6px!important; } .foot-desc{ font-family:var(--font-body)!important; font-size:var(--font-size-sm)!important; line-height:var(--line-height-relaxed)!important; } /* ════════════════════════════════════════════════════════════ PHASE 10 — UPPERCASE TARAMA (legal pages + diğerleri) ════════════════════════════════════════════════════════════ */ /* 10.1 — Legal pages: gizlilik + kullanim-kosullari */ .page-hero h1, .legal-section h2, .legal-section h3{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.02em!important; } .legal-section h3{ font-family:var(--font-ui)!important; font-size:0.95rem!important; font-weight:700!important; letter-spacing:var(--tracking-wide)!important; text-transform:uppercase!important; color:var(--color-ink-muted)!important; } /* Legal labels (page-eyebrow, cb-label) — keep refined uppercase */ .page-eyebrow, .contact-block .cb-label{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-widest)!important; font-weight:700!important; } /* 10.2 — Geniş kapsam: tüm h1/h2 force */ h1,h2{ text-transform:none!important; } /* Ancak küçük utility heading'ler uppercase kalabilir */ .foot-label, .foot-col-title, .eyebrow, .section-label, .hero-eyebrow, .hero-label, .sec-label, .brand-tag, .tab-count, .card-cat{ text-transform:uppercase!important; } /* ════════════════════════════════════════════════════════════ PHASE 8+9 — ALT SAYFALAR (kariyer, sosyal, dilekçe, sözleşme) ════════════════════════════════════════════════════════════ */ /* 8.1 — Alt sayfa hero: tüm sub-page h1'ler */ .hero h1, .hero-h1{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.025em!important; line-height:1.1!important; } .hero h1 em, .hero-h1 em{ font-style:italic!important; font-weight:400!important; } /* 8.2 — Kariyer pozisyon kartları */ .pos-title, .card-title{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.02em!important; line-height:1.22!important; } .position-card{ border-radius:var(--radius-sm)!important; transition: border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease!important; } .position-card:hover{ border-color:rgba(201,167,106,.38)!important; box-shadow:var(--shadow-gold), var(--shadow-lg)!important; transform:translateY(-5px)!important; } .position-card::after{ background:linear-gradient(90deg,var(--color-gold),rgba(201,167,106,.2))!important; height:2px!important; } /* 8.3 — Sosyal sorumluluk + kariyer ortak heading stili */ .office-title, .culture-title, .step-title, .value-title{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.02em!important; } /* 9.1 — Doküman listesi (dilekçe, sözleşme) */ .doc-title, .dilekce-title, .sozlesme-title, [class*="doc-card"] h3, [class*="doc-card"] .title{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; } /* Doküman kart hover: subtle gold */ [class*="doc-card"]:hover, .dilekce-card:hover, .sozlesme-card:hover{ border-color:rgba(201,167,106,.30)!important; box-shadow:var(--shadow-gold)!important; } /* ════════════════════════════════════════════════════════════ PHASE 7 — BLOG SAYFASI ════════════════════════════════════════════════════════════ */ /* 7.2 — Category tabs: pill style, crimson active */ .cat-tab{ border-radius:var(--radius-full)!important; font-family:var(--font-ui)!important; font-size:11px!important; font-weight:600!important; letter-spacing:var(--tracking-wide)!important; border-color:rgba(26,22,20,.14)!important; color:var(--color-ink-muted)!important; padding:6px 16px!important; transition:all .25s cubic-bezier(.16,1,.3,1)!important; } .cat-tab:hover{ border-color:var(--color-crimson)!important; color:var(--color-crimson)!important; background:rgba(145,0,0,.04)!important; } .cat-tab.active{ background:var(--color-crimson)!important; color:#fff!important; border-color:var(--color-crimson)!important; box-shadow:var(--shadow-crimson)!important; } .cat-tab.active .tab-count{ background:rgba(255,255,255,.22)!important; color:#fff!important; } /* 7.1 — Card titles: Playfair */ .card-title{ font-family:var(--font-display)!important; font-size:1.1rem!important; font-weight:600!important; letter-spacing:-0.015em!important; line-height:1.3!important; } /* Card hover: gold border accent instead of navy */ .card:hover{ border-color:rgba(201,167,106,.35)!important; box-shadow:var(--shadow-gold), 0 8px 24px rgba(21,21,21,.08)!important; } /* Read button: crimson */ .read-btn{ color:var(--color-crimson)!important; font-family:var(--font-ui)!important; font-weight:700!important; letter-spacing:var(--tracking-wide)!important; } /* Search input: bottom-border */ .search-input{ font-family:var(--font-body)!important; border-radius:var(--radius-sm)!important; } .search-input:focus{ border-color:var(--color-crimson)!important; box-shadow:0 0 0 3px rgba(145,0,0,.08)!important; } /* ════════════════════════════════════════════════════════════ PHASE 6 — İLETİŞİM SAYFASI ════════════════════════════════════════════════════════════ */ /* 6.3 — Hero: mixed-case, editorial */ .hero h1{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.025em!important; } .hero h1 em{ font-style:italic!important; font-weight:400!important; color:#e8d07a!important; } /* 6.1 — Bottom-border-only inputs (floating underline style) */ .field input, .field textarea, .field select{ border:none!important; border-bottom:1.5px solid rgba(26,22,20,.18)!important; border-radius:0!important; background:transparent!important; padding:12px 4px 10px!important; font-family:var(--font-body)!important; font-size:var(--font-size-base)!important; color:var(--color-ink)!important; transition:border-color .25s ease, background .25s ease!important; } .field input:focus, .field textarea:focus, .field select:focus{ border-bottom-color:var(--color-crimson)!important; background:rgba(145,0,0,.02)!important; outline:none!important; } .field label{ font-family:var(--font-ui)!important; font-size:var(--font-size-xs)!important; letter-spacing:var(--tracking-wider)!important; color:var(--color-ink-muted)!important; font-weight:600!important; } .field textarea{ background:rgba(26,22,20,.02)!important; border:1px solid rgba(26,22,20,.10)!important; border-radius:var(--radius-sm)!important; padding:12px 14px!important; } .field textarea:focus{ border-color:rgba(145,0,0,.28)!important; background:#fff!important; } /* 6.2 — Submit button: crimson + transition */ .btn-submit{ background:var(--color-crimson)!important; font-family:var(--font-ui)!important; letter-spacing:var(--tracking-wide)!important; border-radius:var(--radius-sm)!important; transition:all .3s cubic-bezier(.16,1,.3,1)!important; box-shadow:var(--shadow-crimson)!important; } .btn-submit:hover{ background:var(--color-crimson-dark)!important; transform:translateY(-2px)!important; box-shadow:0 0 0 3px rgba(145,0,0,.15), var(--shadow-lg)!important; } /* Section headings in sub-pages */ .sec-h2,.office-title,.step-title,.form-card h3,.info-block h4{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.02em!important; } /* ════════════════════════════════════════════════════════════ PHASE 4 — TEAM CARDS ════════════════════════════════════════════════════════════ */ /* 4.1 — Portrait ratio + name styling */ #ekip .tc{ overflow:hidden!important; border-radius:var(--radius-sm)!important; transition: border-color .3s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease!important; } #ekip .tc-photo{ height:280px!important; position:relative!important; overflow:hidden!important; } #ekip .tc-photo img{ transition:transform .7s cubic-bezier(.16,1,.3,1), filter .4s ease!important; object-position:top center!important; } /* Bottom-to-top gradient overlay */ #ekip .tc-photo::after{ content:""!important; position:absolute!important; inset:0!important; background:linear-gradient( to top, rgba(18,14,14,.75) 0%, rgba(18,14,14,.30) 40%, transparent 65% )!important; transition:opacity .4s ease!important; } /* 4.2 — Hover: zoom + accent reveal */ #ekip .tc:hover .tc-photo img{ transform:scale(1.06)!important; filter:brightness(1.0) saturate(1.05)!important; } #ekip .tc:hover{ border-color:rgba(201,167,106,.35)!important; box-shadow: 0 0 0 1px rgba(201,167,106,.15), var(--shadow-xl)!important; transform:translateY(-6px)!important; } /* Name: Playfair Display + gold accent separator */ #ekip .tc-name{ font-family:var(--font-display)!important; font-size:1.2rem!important; font-weight:600!important; letter-spacing:-0.01em!important; position:relative!important; padding-bottom:10px!important; margin-bottom:6px!important; } #ekip .tc-name::after{ content:""!important; position:absolute!important; bottom:0!important; left:0!important; width:28px!important; height:1.5px!important; background:var(--color-gold)!important; transition:width .35s cubic-bezier(.16,1,.3,1)!important; } #ekip .tc:hover .tc-name::after{ width:52px!important; } #ekip .tc-role{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-wider)!important; } /* ════════════════════════════════════════════════════════════ PHASE 3 — SECTION HEADINGS + PRACTICE CARDS ════════════════════════════════════════════════════════════ */ /* 3.3 — Section heading: Playfair, mixed-case, editorial */ .sec-h2{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; letter-spacing:-0.025em!important; line-height:1.18!important; } .sec-h2 em{ font-style:italic!important; font-weight:400!important; color:var(--color-gold)!important; } .sec-label{ font-family:var(--font-ui)!important; letter-spacing:var(--tracking-widest)!important; } /* 3.1 — Practice grid: tüm kartlar eşit boyutta */ @media(min-width:900px){ .practice-grid{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:16px!important; } } /* 3.2 — Card title with Playfair + hover refinement */ .practice-title{ font-family:var(--font-display)!important; font-weight:600!important; letter-spacing:-0.02em!important; line-height:1.2!important; text-transform:none!important; } .practice-card{ border-radius:var(--radius-sm)!important; transition: border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease!important; } .practice-card:hover{ transform:translateY(-5px)!important; border-color:rgba(201,167,106,.40)!important; box-shadow: var(--shadow-gold), 0 18px 40px rgba(21,21,21,.10)!important; } .practice-card::before{ background:linear-gradient(90deg,var(--color-gold),rgba(145,0,0,.20))!important; height:2px!important; } /* ════════════════════════════════════════════════════════════ PHASE 2 — HERO ════════════════════════════════════════════════════════════ */ /* 2.1 — Overlay: diagonal gold accent + vignette */ .hero-img::after{ background: linear-gradient(135deg, rgba(26,22,20,.62) 0%, rgba(26,22,20,.38) 35%, rgba(26,22,20,.14) 65%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.08) 0%, transparent 40%, rgba(0,0,0,.22) 100%) !important; } /* Altın diagonal accent çizgisi */ .hero-img::before{ background: linear-gradient(135deg, transparent 0%, transparent 48%, rgba(var(--nav-accent-rgb),.12) 49%, rgba(var(--nav-accent-rgb),.08) 51%, transparent 52%, transparent 100%), radial-gradient(ellipse 72% 54% at 50% 0%,rgba(145,0,0,.05),transparent 60%) !important; } /* 2.2 — Hero title: mixed-case Playfair, refined spacing */ .hero-h1{ font-family:var(--font-display)!important; text-transform:none!important; font-weight:600!important; font-size:clamp(2.4rem,5vw,4rem)!important; letter-spacing:-0.03em!important; line-height:1.08!important; color:#fff!important; text-shadow:0 2px 24px rgba(0,0,0,.28)!important; } .hero-h1 em{ font-style:italic!important; font-weight:400!important; background:linear-gradient(90deg,#e8d4a8,var(--color-gold))!important; -webkit-background-clip:text!important; -webkit-text-fill-color:transparent!important; background-clip:text!important; } /* Hero label — witte op donker overlay */ .hero-label{ color:rgba(232,212,168,.90)!important; border-color:rgba(232,212,168,.28)!important; background:rgba(0,0,0,.18)!important; backdrop-filter:blur(8px)!important; } /* Hero subtitle */ .hero-sub{ color:rgba(255,255,255,.82)!important; text-shadow:0 1px 8px rgba(0,0,0,.18)!important; font-size:var(--font-size-lg)!important; line-height:var(--line-height-relaxed)!important; } .hero-sub strong{ color:#e8d4a8!important; background:rgba(232,212,168,.12)!important; border-color:rgba(232,212,168,.28)!important; } /* 2.3 — CTA buttons: refined hero context */ .hero-acts .btn-gold{ background:var(--color-crimson)!important; color:#fff!important; border:1px solid rgba(232,212,168,.28)!important; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, var(--shadow-lg), 0 0 0 0 rgba(201,167,106,0)!important; letter-spacing:var(--tracking-wide)!important; font-family:var(--font-ui)!important; font-size:var(--font-size-sm)!important; font-weight:700!important; transition:all .3s cubic-bezier(.16,1,.3,1)!important; } .hero-acts .btn-gold:hover{ background:var(--color-crimson-dark)!important; border-color:rgba(232,212,168,.5)!important; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 3px rgba(201,167,106,.22), var(--shadow-xl)!important; transform:translateY(-2px)!important; } .hero-acts .btn-ghost{ background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.26)!important; color:#fff!important; backdrop-filter:blur(8px)!important; letter-spacing:var(--tracking-wide)!important; font-family:var(--font-ui)!important; font-size:var(--font-size-sm)!important; font-weight:600!important; transition:all .3s cubic-bezier(.16,1,.3,1)!important; } .hero-acts .btn-ghost:hover{ background:rgba(255,255,255,.16)!important; border-color:rgba(232,212,168,.5)!important; color:#e8d4a8!important; transform:translateY(-2px)!important; } /* Trust badges over dark bg */ .hero-trust{ border-top-color:rgba(255,255,255,.12)!important; } .hero-trust .trust-p{ color:rgba(255,255,255,.72)!important; } .hero-trust .trust-p svg{ stroke:var(--color-gold)!important; } /* 2.4 — Scroll indicator: refined */ .hero-scroll-text{ color:rgba(232,212,168,.70)!important; letter-spacing:var(--tracking-widest)!important; font-family:var(--font-ui)!important; font-size:9px!important; } .hero-scroll-line{ background:linear-gradient(180deg,rgba(201,167,106,.60),transparent)!important; }