/* tokens.css */ /* =========================================================================== KTR Web — Tasarım Tokenları Marka: teal (logodan) + oyuncu vurgu blokları (sarı/yeşil/pembe/mavi) =========================================================================== */ :root { /* — Marka: Teal — */ --teal-50: #E7F7F4; --teal-100: #C6EFE9; --teal-200: #97E2D8; --teal-300: #5FD0C2; --teal-400: #2FBBAB; --teal-500: #14A89E; /* ana */ --teal-600: #0E938A; /* hover */ --teal-700: #0C766F; --teal-800: #0C5B56; /* koyu — header/footer zemini */ --teal-900: #0A4844; /* — Vurgu renkleri (bölüm blokları) — */ --yellow: #FFC53D; --yellow-soft: #FFF4D6; --green: #43C08A; --green-soft: #E4F7EE; --pink: #FF6FA0; --pink-soft: #FFE7F0; --blue: #3E9EE6; --blue-soft: #E6F2FC; --coral: #FF8256; --coral-soft: #FFECE3; /* — Nötrler (hafif teal-tonlu) — */ --ink: #14302E; /* ana metin */ --ink-soft: #4B5F5C; /* ikincil metin */ --ink-faint: #7C8F8C; /* üçüncül */ --bg: #FFFFFF; --bg-warm: #F6FAF9; /* kesim zemini */ --surface: #FFFFFF; --border: #E1ECEA; --border-strong: #CBDAD7; /* — Semantik — */ --color-primary: var(--teal-500); --color-on-primary: #FFFFFF; --color-accent: var(--yellow); --color-danger: #E0483B; --color-success: var(--green); --focus-ring: 0 0 0 3px rgba(20,168,158,.45); /* — Tipografi — */ --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif; --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --text-xs: 0.78rem; --text-sm: 0.88rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 2.9rem; --text-5xl: 3.6rem; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.65; /* — Aralık (4/8 ritmi) — */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem; --sp-16: 8rem; /* — Yuvarlaklık — */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px; /* — Gölge (renk-tonlu, katmanlı) — */ --shadow-sm: 0 1px 2px rgba(12,91,86,.06), 0 2px 6px rgba(12,91,86,.05); --shadow-md: 0 4px 10px rgba(12,91,86,.08), 0 10px 24px rgba(12,91,86,.07); --shadow-lg: 0 10px 24px rgba(12,91,86,.10), 0 24px 48px rgba(12,91,86,.10); --shadow-teal: 0 12px 28px rgba(20,168,158,.28); /* — Konteyner — */ --container: 1180px; --container-narrow: 760px; /* — Z-index ölçeği — */ --z-header: 100; --z-overlay: 200; --z-modal: 300; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* =========================================================================== Karanlık mod — aynı token adları, koyu zemine göre yeniden tanımlanmış değerler. Etkin tema JS tarafından olarak yazılır (sistem tercihi + kullanıcı seçimi çözümlenmiş halde); CSS burada sadece o niteliğe tepki verir. =========================================================================== */ :root[data-theme="dark"] { --teal-50: #10302C; --teal-100: #14403A; --teal-200: #1B5750; --teal-300: #227067; --teal-400: #2FBBAB; --teal-500: #2BD1BE; --teal-600: #1FB6A5; --teal-700: #7FE9DB; --teal-800: #0C5B56; --teal-900: #0A4844; --yellow: #FFCE5C; --yellow-soft: #2B2410; --green: #5AD69F; --green-soft: #10291F; --pink: #FF8FBB; --pink-soft: #2B1421; --blue: #5CB2F5; --blue-soft: #10222E; --coral: #FF9B72; --coral-soft: #2B1810; --ink: #EAF3F1; --ink-soft: #AFC4C0; --ink-faint: #7E938F; --bg: #0B1615; --bg-warm: #101E1C; --surface: #14211F; --border: #1F2E2C; --border-strong: #2C3F3C; --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28); --shadow-md: 0 4px 10px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.32); --shadow-lg: 0 10px 24px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.4); --shadow-teal: 0 12px 28px rgba(43,209,190,.25); --focus-ring: 0 0 0 3px rgba(43,209,190,.5); --callout-border: #4A3A12; --callout-text: #FFE29B; --callout-icon: #FFCE5C; --status-ok-text: #7FE9C0; --status-err-bg: #331813; --status-err-text: #FF9B8C; } /* main.css */ /* =========================================================================== KTR Web — Ana stil (temel + bileşenler) =========================================================================== */ /* Fontlar layout 'inde bloke-etmeyen şekilde yükleniyor (performans) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, h5 { font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } a { color: var(--teal-700); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--teal-500); } img { max-width: 100%; display: block; } ul { list-style: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .container-narrow { max-width: var(--container-narrow); } .skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-modal); background: var(--teal-800); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; color: #fff; } /* — Bölüm ritmi — */ .section { padding-block: var(--sp-8); } .section-tight { padding-block: var(--sp-8); } @media (min-width: 768px) { .section { padding-block: var(--sp-10); } } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; color: var(--teal-600); background: var(--teal-50); padding: .35rem .85rem; border-radius: var(--r-full); } .section-head { max-width: 640px; margin-bottom: var(--sp-6); } .section-head.center { margin-inline: auto; text-align: center; } .section-title { font-size: clamp(1.9rem, 4vw, var(--text-4xl)); margin-top: var(--sp-3); } .section-sub { color: var(--ink-soft); font-size: var(--text-lg); margin-top: var(--sp-3); } /* — Butonlar — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); padding: .8rem 1.6rem; border-radius: var(--r-full); border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; min-height: 48px; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--teal-500); color: #fff; box-shadow: var(--shadow-teal); } .btn-primary:hover { background: var(--teal-600); color: #fff; transform: translateY(-2px); } .btn-ghost { background: var(--surface); color: var(--teal-700); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--teal-400); color: var(--teal-600); transform: translateY(-2px); } .btn-white { background: #fff; color: var(--teal-700); } .btn-white:hover { background: var(--teal-50); color: var(--teal-800); transform: translateY(-2px); } .btn-sm { padding: .5rem 1rem; min-height: 40px; font-size: var(--text-sm); } .icon { width: 1.2em; height: 1.2em; stroke-width: 2; flex: none; } /* ============================ HEADER ============================ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background-color .25s ease, border-color .25s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 74px; } .brand { display: flex; align-items: center; gap: .6rem; } .brand img { height: 46px; width: auto; } .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: block; } .brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--teal-800); line-height: 1.05; } .brand-text span { display: block; font-size: .72rem; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; } .nav { display: none; align-items: center; gap: var(--sp-1); } .nav a { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); padding: .5rem .85rem; border-radius: var(--r-full); transition: background .18s ease, color .18s ease; } .nav a:hover { background: var(--teal-50); color: var(--teal-700); } .nav a[aria-current="page"] { background: var(--teal-500); color: #fff; } .header-cta { display: none; } @media (min-width: 980px) { .nav, .header-cta { display: flex; } } /* Açılır menü (dropdown) */ .nav-group { position: relative; } .nav-group-btn { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); padding: .5rem .85rem; border: none; background: none; border-radius: var(--r-full); transition: background .18s ease, color .18s ease; } .nav-group-btn .icon { width: 15px; height: 15px; transition: transform .2s ease; } .nav-group:hover .nav-group-btn, .nav-group.is-open .nav-group-btn, .nav-group.is-active .nav-group-btn { background: var(--teal-50); color: var(--teal-700); } .nav-group:hover .nav-group-btn .icon, .nav-group.is-open .nav-group-btn .icon { transform: rotate(180deg); } /* düğme ile menü arasındaki boşlukta hover'ın kopmaması için köprü */ .nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav-submenu { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-overlay); min-width: 218px; display: flex; flex-direction: column; gap: 2px; padding: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-group:hover .nav-submenu, .nav-group.is-open .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-submenu a { display: block; white-space: nowrap; padding: .55rem .8rem; border-radius: var(--r-md); font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); transition: background .16s ease, color .16s ease; } .nav-submenu a:hover { background: var(--teal-50); color: var(--teal-700); } .nav-submenu a[aria-current="page"] { background: var(--teal-500); color: #fff; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--ink); } @media (min-width: 980px) { .nav-toggle { display: none; } } /* Açık/koyu tema anahtarı */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; color: var(--teal-700); transition: border-color .2s ease, color .2s ease, background-color .25s ease; } .theme-toggle:hover { border-color: var(--teal-400); color: var(--teal-600); } .theme-toggle .icon { width: 20px; height: 20px; } .theme-icon-moon { display: block; } .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: block; } /* Mobil menü */ .mobile-nav { position: fixed; inset: 74px 0 auto 0; z-index: var(--z-overlay); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: var(--sp-4) var(--sp-5) var(--sp-6); transform: translateY(-120%); transition: transform .28s cubic-bezier(.4,0,.2,1), background-color .25s ease; } .mobile-nav.open { transform: translateY(0); } .mobile-nav a { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); padding: .85rem .5rem; border-bottom: 1px solid var(--border); } .mobile-nav a[aria-current="page"] { color: var(--teal-600); } .mobile-nav .btn { margin-top: var(--sp-4); width: 100%; } /* Mobil menüde dropdown = akordeon */ .mobile-nav .nav-group-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); padding: .85rem .5rem; border: none; border-bottom: 1px solid var(--border); background: none; cursor: pointer; } .mobile-nav .nav-group-btn .icon { width: 18px; height: 18px; transition: transform .2s ease; } .mobile-nav .nav-group.is-open .nav-group-btn .icon { transform: rotate(180deg); } .mobile-nav .nav-submenu { position: static; opacity: 1; visibility: visible; transform: none; display: none; flex-direction: column; gap: 0; padding: 0 0 0 var(--sp-4); min-width: 0; background: none; border: none; box-shadow: none; } .mobile-nav .nav-group.is-open .nav-submenu { display: flex; } .mobile-nav .nav-submenu a { font-size: 1rem; padding: .7rem .5rem; } .mobile-nav .nav-submenu a[aria-current="page"] { background: none; color: var(--teal-600); } /* ============================ HERO ============================ */ .hero { position: relative; overflow: hidden; background: var(--teal-50); } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 55% at 82% 8%, rgba(255,197,61,.30), transparent 60%), radial-gradient(50% 45% at 5% 92%, rgba(255,111,160,.22), transparent 60%), radial-gradient(45% 40% at 95% 90%, rgba(62,158,230,.20), transparent 60%); } .hero-inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); padding-block: var(--sp-10) var(--sp-12); } @media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: var(--sp-12) var(--sp-16); } } .hero h1 { font-size: clamp(2.4rem, 6vw, var(--text-5xl)); font-weight: 800; } .hero h1 .accent { color: var(--teal-600); position: relative; white-space: nowrap; } .hero-lead { font-size: var(--text-xl); color: var(--ink-soft); margin-top: var(--sp-4); max-width: 34ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } .hero-trust { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600; } .hero-shortcuts-panel { margin-top: var(--sp-5); padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 55%, transparent); } .hero-shortcuts-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: var(--sp-3); } .hero-shortcuts { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .hero-shortcuts .btn { border-color: transparent; box-shadow: none; } .hero-shortcuts .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* teal-50 hero zeminiyle aynıydı, göz ardı ediliyordu — teal-100 ile ayırt edici hale getirildi */ .hero-shortcuts .tone-teal { background: var(--teal-100); color: var(--teal-700); } .hero-shortcuts .tone-yellow { background: var(--yellow-soft); color: #92680f; } .hero-shortcuts .tone-blue { background: var(--blue-soft); color: var(--blue); } .hero-shortcuts .tone-pink { background: var(--pink-soft); color: var(--pink); } .hero-shortcuts .tone-green { background: var(--green-soft); color: #1a7a52; } .hero-shortcuts .tone-coral { background: var(--coral-soft); color: #c14e28; } [data-theme="dark"] .hero-shortcuts .tone-green { color: var(--green); } [data-theme="dark"] .hero-shortcuts .tone-coral { color: var(--coral); } .hero-media { position: relative; } .hero-photo { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; background: var(--teal-100); border: 6px solid var(--surface); } /* Dönen kareler: üst üste yığılı, çapraz geçişli */ .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; } .hero-photo img.is-active { opacity: 1; } /* JS yoksa ilk kare görünsün */ html:not(.js) .hero-photo img:first-child { opacity: 1; } .hero-badge { --badge-out: 15%; /* kendi boyutunun bu kadarı sınırın dışından geçer */ position: absolute; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: .5rem .75rem; display: flex; align-items: center; gap: .4rem; font-weight: 700; font-family: var(--font-display); font-size: .76rem; line-height: 1.15; white-space: nowrap; z-index: 2; animation: badgeOrbit 100s linear infinite; } .hero-badge .dot { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: none; } .hero-badge .dot .icon { width: 1em; height: 1em; } /* Dördü de aynı çevrimi, aynı hızda izler; negatif gecikmeler aralarındaki mesafeyi (çevrimin dörtte biri) hiç bozulmadan korur — kervan gibi birbirini takip ederler */ .hero-badge-1 { animation-delay: 0s; } .hero-badge-2 { animation-delay: -25s; } .hero-badge-3 { animation-delay: -50s; } .hero-badge-4 { animation-delay: -75s; } /* Fotoğraf karesinin kenarları boyunca sürekli ilerleyen çevrim: sol üstten aşağı (sol kenar) -> sağa (alt kenar) -> yukarı (sağ kenar) -> sola (üst kenar). top/left tam kenar çizgisinde (0%/100%); transform kendi boyutunun ~%15'i kadar dışarı sarkıtır — böylece badge boyutu ne olursa olsun sınırın belli bir bölümü her zaman fotoğrafın dışından geçer (bkz. --badge-out). */ @keyframes badgeOrbit { 0% { top: 0%; left: 0%; transform: translate(calc(-1 * var(--badge-out)), calc(-1 * var(--badge-out))); } 25% { top: 100%; left: 0%; transform: translate(calc(-1 * var(--badge-out)), calc(-100% + var(--badge-out))); } 50% { top: 100%; left: 100%; transform: translate(calc(-100% + var(--badge-out)), calc(-100% + var(--badge-out))); } 75% { top: 0%; left: 100%; transform: translate(calc(-100% + var(--badge-out)), calc(-1 * var(--badge-out))); } 100% { top: 0%; left: 0%; transform: translate(calc(-1 * var(--badge-out)), calc(-1 * var(--badge-out))); } } @media (prefers-reduced-motion: reduce) { .hero-badge { animation: none; } .hero-badge-1 { top: 0%; left: 0%; transform: translate(calc(-1 * var(--badge-out)), calc(-1 * var(--badge-out))); } .hero-badge-2 { top: 100%; left: 0%; transform: translate(calc(-1 * var(--badge-out)), calc(-100% + var(--badge-out))); } .hero-badge-3 { top: 100%; left: 100%; transform: translate(calc(-100% + var(--badge-out)), calc(-100% + var(--badge-out))); } .hero-badge-4 { top: 0%; left: 100%; transform: translate(calc(-100% + var(--badge-out)), calc(-1 * var(--badge-out))); } } /* Dar ekranlarda rozetleri biraz daha küçült; dördü de görünür kalır. Taşma payı da azaltılır ki ekran kenarını taşmasın. */ @media (max-width: 899px) { .hero-badge { --badge-out: 10%; font-size: .68rem; padding: .4rem .6rem; gap: .3rem; } .hero-badge .dot { width: 22px; height: 22px; } } /* ============================ KARTLAR ============================ */ .grid { display: grid; gap: var(--sp-5); } .grid-guides { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } @media (min-width: 640px) { .grid-guides { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .grid-guides { grid-template-columns: repeat(4, 1fr); } } /* Rehber kartı */ .guide-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .guide-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); } .guide-card .photo { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--teal-50); } .guide-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .guide-card:hover .photo img { transform: scale(1.05); } .guide-card .body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .35rem; flex: 1; } .guide-card .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .guide-card .langs { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; display: flex; align-items: center; gap: .35rem; } .guide-card .card-tag { position: absolute; top: .6rem; left: .6rem; background: rgba(255,255,255,.92); color: var(--teal-700); font-family: var(--font-display); font-weight: 600; font-size: .72rem; padding: .25rem .6rem; border-radius: var(--r-full); } .guide-card .go { margin-top: auto; padding-top: var(--sp-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--teal-600); display: inline-flex; align-items: center; gap: .3rem; } /* Renkli özellik kartları (Neden rehber) */ .feature-grid { grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .feature-card { position: relative; overflow: hidden; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* Simge: kutunun arkasında, büyük ve soluk — metnin önüne geçmeden dekoratif iz bırakır */ .feature-card .fico { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 0; width: 88px; height: 88px; display: grid; place-items: center; opacity: .16; pointer-events: none; } .feature-card .fico .icon { width: 100%; height: 100%; stroke-width: 1.5; } .feature-card h3, .feature-card p { position: relative; z-index: 1; } .feature-card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); } .feature-card p { color: var(--ink-soft); font-size: var(--text-sm); } .tone-teal .fico { color: var(--teal-500); } .tone-teal { border-top: 4px solid var(--teal-500); } .tone-yellow .fico { color: var(--yellow); } .tone-yellow { border-top: 4px solid var(--yellow); } .tone-pink .fico { color: var(--pink); } .tone-pink { border-top: 4px solid var(--pink); } .tone-blue .fico { color: var(--blue); } .tone-blue { border-top: 4px solid var(--blue); } .tone-green .fico { color: var(--green); } .tone-green { border-top: 4px solid var(--green); } .tone-coral .fico { color: var(--coral); } .tone-coral { border-top: 4px solid var(--coral); } /* Mekan kartları */ .place-grid { grid-template-columns: 1fr; } @media (min-width: 720px) { .place-grid { grid-template-columns: repeat(3, 1fr); } } .place-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-md); } .place-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .place-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,72,68,.82), rgba(10,72,68,.15) 55%, transparent); } .place-card:hover img { transform: scale(1.06); } .place-card .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-5); color: #fff; } .place-card .cap h3 { color: #fff; font-size: var(--text-xl); } .place-card .cap p { color: rgba(255,255,255,.85); font-size: var(--text-sm); } /* ============================ SAYAÇLAR ============================ */ .stats { background: var(--teal-800); color: #fff; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } @media (min-width: 820px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; } .stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.4rem); color: #fff; line-height: 1; } .stat .num .plus { color: var(--yellow); } .stat .label { margin-top: var(--sp-2); color: rgba(255,255,255,.82); font-weight: 600; } /* ============================ REFERANSLAR ============================ */ .quote-grid { grid-template-columns: 1fr; } @media (min-width: 780px) { .quote-grid { grid-template-columns: repeat(3, 1fr); } } .quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); } .quote-card .stars { color: var(--yellow); display: flex; gap: 2px; } .quote-card p { color: var(--ink-soft); font-style: italic; } .quote-card .who { display: flex; align-items: center; gap: .6rem; margin-top: auto; } .quote-card .who .av { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; } .quote-card .who b { font-family: var(--font-display); } /* ============================ MİT / DOĞRUSU NE ============================ */ .myth-band { background: var(--yellow-soft); } .myth-item { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--coral); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .myth-item .wrong { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; color: var(--coral); font-size: var(--text-sm); } .myth-item h3 { font-size: var(--text-lg); margin: var(--sp-2) 0; } .myth-item .right { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: var(--text-sm); } /* ============================ CTA ŞERİDİ ============================ */ .cta-band { background: linear-gradient(120deg, var(--teal-600), var(--teal-800)); color: #fff; border-radius: var(--r-xl); padding: var(--sp-8); text-align: center; position: relative; overflow: hidden; } .cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 80% at 15% 20%, rgba(255,197,61,.25), transparent 60%), radial-gradient(50% 80% at 90% 90%, rgba(255,111,160,.22), transparent 60%); } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; font-size: clamp(1.7rem, 4vw, var(--text-3xl)); } .cta-band p { color: rgba(255,255,255,.88); margin-top: var(--sp-3); font-size: var(--text-lg); } .cta-band .hero-actions { justify-content: center; } /* ============================ FOOTER ============================ */ .site-footer { background: var(--teal-900); color: rgba(255,255,255,.78); padding-block: var(--sp-8) var(--sp-5); margin-top: var(--sp-10); } .footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer h4 { color: #fff; font-size: var(--text-base); margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-sm); } .site-footer a { color: rgba(255,255,255,.78); } .site-footer a:hover { color: #fff; } .footer-brand img { height: 44px; background: #fff; padding: 6px 10px; border-radius: var(--r-md); } .footer-brand p { margin-top: var(--sp-3); font-size: var(--text-sm); max-width: 34ch; } .footer-links { display: grid; grid-template-columns: repeat(2, auto); column-gap: var(--sp-5); row-gap: .55rem; } .footer-links li { margin-bottom: 0; } .footer-contact li { display: flex; gap: .6rem; margin-bottom: .7rem; font-size: var(--text-sm); align-items: flex-start; } .footer-contact .icon { color: var(--teal-300); margin-top: 2px; } .footer-social { display: flex; gap: .6rem; margin-top: var(--sp-4); } .footer-social a { width: 42px; height: 42px; border-radius: var(--r-md); background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; transition: background .18s ease; } .footer-social a:hover { background: var(--teal-500); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-6); padding-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: var(--text-sm); } /* — Yardımcılar — */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* pages.css */ /* =========================================================================== KTR Web — İç sayfa stilleri (profil, statik, blog, form) =========================================================================== */ /* Sayfa başlığı bandı */ .page-hero { background: var(--teal-50); position: relative; overflow: hidden; padding-block: var(--sp-8); } .page-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 90% 10%, rgba(255,197,61,.22), transparent 60%), radial-gradient(45% 55% at 5% 95%, rgba(62,158,230,.16), transparent 60%); } .page-hero .container { position: relative; } .breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: var(--sp-3); } .breadcrumb a { color: var(--teal-700); } .breadcrumb .sep { color: var(--ink-faint); } .page-hero h1 { font-size: clamp(2rem, 5vw, var(--text-4xl)); } .page-hero .lead { color: var(--ink-soft); font-size: var(--text-lg); margin-top: var(--sp-3); max-width: 60ch; } /* Prose */ .prose { max-width: var(--container-narrow); margin-inline: auto; } .prose h2 { font-size: var(--text-2xl); margin-top: var(--sp-6); margin-bottom: var(--sp-3); } .prose h3 { font-size: var(--text-xl); margin-top: var(--sp-5); margin-bottom: var(--sp-2); color: var(--teal-700); } .prose h4 { font-size: var(--text-xl); margin-top: var(--sp-5); margin-bottom: var(--sp-2); } .prose h5 { font-size: 1.3rem; font-weight: 700; margin-top: var(--sp-6); margin-bottom: var(--sp-2); color: var(--ink); line-height: 1.3; } .prose h6 { font-size: 1.12rem; font-weight: 700; margin-top: var(--sp-5); margin-bottom: var(--sp-2); color: var(--ink); } .prose p { margin-bottom: var(--sp-4); color: var(--ink); } .prose .prose-list { margin: 0 0 var(--sp-4) 0; display: grid; gap: .5rem; } .prose .prose-list li { position: relative; padding-left: 1.75rem; color: var(--ink); } .prose .prose-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1rem; height: 1rem; border-radius: var(--r-full); background: var(--teal-100); border: 2px solid var(--teal-400); } .prose blockquote { border-left: 5px solid var(--teal-400); background: var(--teal-50); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); margin: var(--sp-4) 0; } .prose blockquote p { color: var(--ink); font-style: italic; margin: 0; } .prose blockquote p + p { margin-top: var(--sp-3); } .prose hr { border: 0; height: 1px; background: var(--border); margin: var(--sp-6) 0; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose .eyebrow { margin-bottom: var(--sp-2); } .prose h2 + h3 { margin-top: var(--sp-3); } /* Hakkımızda — tanım illüstrasyonu */ .about-illustration { max-width: var(--container-narrow); margin: var(--sp-6) auto 0; } .about-illustration img { width: 100%; height: auto; display: block; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); background: var(--bg-warm); } /* Hakkımızda — "neden rehber" kartları (.feature-card genel bileşenini 3 sütunda kullanır) */ .reasons-grid { grid-template-columns: 1fr; } @media (min-width: 640px) { .reasons-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .reasons-grid { grid-template-columns: repeat(3, 1fr); } } /* Hakkımızda — "Nasıl Turist Rehberi Olunur" adım listesi */ .steps { max-width: 680px; margin: 0 auto; display: grid; } .step { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-4); padding-bottom: var(--sp-6); } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 4px; width: 2px; background: var(--border-strong); } .step:last-child::before { display: none; } .step-num { width: 52px; height: 52px; border-radius: var(--r-full); display: grid; place-items: center; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: #fff; background: var(--tile-c, var(--teal-500)); box-shadow: 0 0 0 4px var(--surface); } .step-body { padding-top: .3rem; } .step-body h3 { font-size: var(--text-lg); margin-bottom: .3rem; } .step-body p { color: var(--ink-soft); font-size: var(--text-sm); } .kokart-cards { max-width: 680px; margin: var(--sp-10) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); } .kokart-card { flex: 1 1 260px; max-width: 300px; display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: var(--r-lg); padding: var(--sp-4); } .kokart-card .kk-ico { flex: none; width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--teal-500); color: #fff; } .kokart-card h4 { font-size: var(--text-base); margin-bottom: .2rem; } .kokart-card p { color: var(--ink-soft); font-size: var(--text-sm); } .howto-note { max-width: 680px; margin: var(--sp-6) auto 0; display: flex; gap: .6rem; font-size: var(--text-xs); color: var(--ink-faint); line-height: 1.5; } .howto-note .icon { flex: none; margin-top: .15em; color: var(--color-danger); } /* Callout */ .callout { display: flex; gap: .8rem; background: var(--yellow-soft); border: 1px solid var(--callout-border, #F3D98A); border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-5) 0; font-size: var(--text-sm); color: var(--callout-text, #7A5B12); } .callout .icon { color: var(--callout-icon, #C89211); flex: none; margin-top: 2px; } /* Rehber profili */ .profile-head { display: grid; gap: var(--sp-6); } @media (min-width: 860px) { .profile-head { grid-template-columns: 320px 1fr; align-items: start; } } .profile-photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid var(--surface); aspect-ratio: 1/1; background: var(--teal-100); } .profile-photo img { width: 100%; height: 100%; object-fit: cover; } .profile-photo-empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-400), var(--teal-700)); } .profile-photo-empty span { font-family: var(--font-display); font-weight: 800; font-size: 5rem; color: rgba(255,255,255,.92); } .profile-intro h1 { font-size: clamp(1.8rem, 4vw, var(--text-4xl)); } /* Tek satıra sığsın diye kaydırılabilir (nowrap); mobilde her rehber için aynı düzen */ .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .4rem; margin-top: var(--sp-3); } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); padding: .38rem .7rem; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--ink); white-space: nowrap; } .chip .icon { width: .85em; height: .85em; color: var(--teal-600); } .chip-teal { background: var(--teal-500); color: #fff; border-color: transparent; } .chip-teal .icon { color: #fff; } .contact-row { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; gap: .5rem; margin-top: var(--sp-5); } .contact-row::-webkit-scrollbar { display: none; } .contact-row .btn { flex: none; } .social-icons { display: flex; flex: none; gap: .4rem; } .social-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border-strong); color: var(--teal-700); transition: transform .2s ease, border-color .2s ease, color .2s ease; } .social-icon:hover { border-color: var(--teal-400); color: var(--teal-600); transform: translateY(-2px); } .social-icon .icon { width: 18px; height: 18px; } /* Bilgi ızgarası */ .info-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-top: var(--sp-6); } @media (min-width: 560px) { .info-grid { grid-template-columns: repeat(2, 1fr); } } .info-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); } .info-item .k { display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--teal-700); margin-bottom: .25rem; } .info-item .v { font-weight: 600; color: var(--ink); } /* Foto galeri (blog vb. sabit ızgara) */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } } .gallery-grid a, .gallery-grid button { display: block; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--teal-50); padding: 0; border: none; cursor: zoom-in; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gallery-grid a:hover img, .gallery-grid button:hover img { transform: scale(1.06); } /* Blog kapak fotoğrafı — tıklanınca büyür */ .article-cover-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; margin-bottom: var(--sp-6); } .article-cover-btn .article-cover { margin-bottom: 0; } .article-cover-btn:hover .article-cover { box-shadow: var(--shadow-lg); } /* Foto galeri (rehber profili — tek satır ana görsel + küçük resim şeridi) */ .gallery-viewer { display: flex; flex-direction: column; gap: var(--sp-3); } .gallery-main { display: flex; align-items: center; gap: var(--sp-3); } .gallery-main-link { flex: 1; min-width: 0; display: block; aspect-ratio: 16/9; max-height: 520px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--teal-50); } .gallery-main-link img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery-arrow { flex: none; width: 44px; height: 44px; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; color: var(--teal-700); } .gallery-arrow:hover { background: var(--teal-50); } .gallery-arrow .icon { width: 20px; height: 20px; } .gallery-thumbs { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 2px; scrollbar-width: thin; } .gallery-thumb { flex: none; width: 88px; height: 88px; padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: var(--teal-50); opacity: .55; transition: opacity .2s ease, border-color .2s ease; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-thumb:hover { opacity: .85; } .gallery-thumb.is-active { opacity: 1; border-color: var(--teal-500); } @media (max-width: 640px) { .gallery-main-link { aspect-ratio: 4/3; } .gallery-arrow { width: 36px; height: 36px; } .gallery-thumb { width: 68px; height: 68px; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(10,72,68,.92); display: none; align-items: center; justify-content: center; padding: var(--sp-5); } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 86vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .lightbox button { position: absolute; background: rgba(255,255,255,.15); color: #fff; border: none; width: 52px; height: 52px; border-radius: var(--r-full); cursor: pointer; display: grid; place-items: center; } .lightbox .lb-close { top: 20px; right: 20px; } .lightbox .lb-prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox .lb-next { right: 16px; top: 50%; transform: translateY(-50%); } .lightbox button:hover { background: rgba(255,255,255,.28); } /* Blog */ .blog-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 680px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } } .blog-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; } .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .blog-card .cover { aspect-ratio: 16/10; overflow: hidden; background: var(--teal-50); } .blog-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .blog-card:hover .cover img { transform: scale(1.05); } .blog-card .body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; } .blog-card .cat { align-self: flex-start; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--teal-700); background: var(--teal-50); padding: .2rem .7rem; border-radius: var(--r-full); } .blog-card h3 { font-size: var(--text-lg); } .blog-card .meta { margin-top: auto; padding-top: var(--sp-3); font-size: var(--text-sm); color: var(--ink-soft); display: flex; gap: .5rem; align-items: center; } .article-cover { width: 100%; max-height: 440px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-bottom: var(--sp-6); } .article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-5); } .tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-6); } .tag-row .tag { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); background: var(--bg-warm); border: 1px solid var(--border); padding: .25rem .7rem; border-radius: var(--r-full); } /* İletişim formu */ .contact-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 900px) { .contact-layout { grid-template-columns: 1.2fr .8fr; } } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-md); } .field { margin-bottom: var(--sp-4); } .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); margin-bottom: .4rem; } .field label .req { color: var(--coral); } .field input, .field textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); padding: .8rem 1rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-warm); transition: border-color .18s ease, box-shadow .18s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-400); box-shadow: var(--focus-ring); background: var(--surface); } .field textarea { min-height: 140px; resize: vertical; } .form-note { font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--sp-3); } .form-status { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-weight: 600; display: none; } .form-status.show { display: block; } .form-status.ok { background: var(--green-soft); color: var(--status-ok-text, #1c6b45); } .form-status.err { background: var(--status-err-bg, #FCE8E6); color: var(--status-err-text, #9a2820); } .contact-cards { display: grid; gap: var(--sp-4); } .contact-info-card { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); } .contact-info-card .ci-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: none; } .contact-info-card h3 { font-size: var(--text-base); margin-bottom: .15rem; } .contact-info-card a, .contact-info-card p { color: var(--ink-soft); font-size: var(--text-sm); } /* İlgili rehberler mini ızgara */ .mini-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } @media (min-width: 720px) { .mini-guides { grid-template-columns: repeat(4, 1fr); } } /* ——— KONYA SAYFASI ——— */ .konya-about { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-2); } @media (min-width: 760px) { .konya-about { grid-template-columns: repeat(2, 1fr); } } .about-card { display: flex; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); } .about-card .ac-ico { width: 54px; height: 54px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; flex: none; } .about-card h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); } .about-card p { color: var(--ink-soft); font-size: var(--text-sm); } .info-tiles { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; } @media (min-width: 620px) { .info-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .info-tiles { grid-template-columns: repeat(3, 1fr); } } .info-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow: hidden; } .info-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--tile-c, var(--teal-500)); z-index: 1; } .info-tile:hover { box-shadow: var(--shadow-md); border-color: var(--tile-c, var(--teal-200)); } .info-tile[open] { box-shadow: var(--shadow-md); } /* Başlık (tıklanabilir) */ .info-tile .ti-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); } .info-tile .ti-summary::-webkit-details-marker { display: none; } .info-tile .ti-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--r-lg); } .info-tile .ti-ico { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; color: #fff; background: var(--tile-c, var(--teal-500)); flex: none; } .info-tile .ti-ico .icon { width: 26px; height: 26px; } .info-tile .ti-htext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .info-tile .ti-type { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tile-c, var(--teal-600)); } .info-tile .ti-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--ink); line-height: 1.3; } .info-tile .ti-toggle { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--tile-c, var(--teal-600)); background: var(--bg-warm); transition: transform .25s ease, background .2s ease; } .info-tile[open] .ti-toggle { transform: rotate(90deg); } .info-tile .ti-toggle .icon { width: 18px; height: 18px; } .info-tile .ti-badge { position: absolute; top: 12px; right: var(--sp-4); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); color: var(--ink); background: var(--bg-warm); border: 1px solid var(--border); padding: .2rem .6rem; border-radius: var(--r-full); z-index: 2; } /* Açıklama (açılınca) */ .info-tile .ti-body { padding: 0 var(--sp-5) var(--sp-5); margin-left: calc(48px + var(--sp-3)); } .info-tile .ti-body p { color: var(--ink-soft); font-size: var(--text-sm); margin: 0; } .info-tile[open] .ti-body { animation: tileReveal .28s ease; } @keyframes tileReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .info-tile .ti-body { margin-left: 0; } } /* Doğrusu Ne — akordeon içindeki alıntı + "Doğrusu" etiketi */ .myth-quote { font-style: italic; color: var(--ink-soft); background: var(--bg-warm); border-left: 4px solid var(--coral); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--text-sm); } .info-tile .ti-body .right { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; color: var(--green); font-size: var(--text-sm); margin-bottom: var(--sp-2); } .myth-answer p { margin: 0 0 var(--sp-2); } .myth-answer p:last-child { margin-bottom: 0; } .tone-teal { --tile-c: var(--teal-500); } .tone-blue { --tile-c: var(--blue); } .tone-pink { --tile-c: var(--pink); } .tone-green { --tile-c: var(--green); } .tone-coral { --tile-c: var(--coral); } .tone-yellow { --tile-c: #E0A21A; } /* Müze Ücretleri — akordeon: isim/rozet/ilçe her zaman görünür, saat/ücret detayı tıklayınca açılır */ .museum-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: start; } @media (min-width: 720px) { .museum-grid { grid-template-columns: repeat(2, 1fr); } } .museum-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease; } .museum-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--tile-c, var(--teal-500)); z-index: 2; } /* Her ton kendi tek rengiyle hafif bir zemin tonu alır (gradyan değil, düz renk) */ .museum-card.tone-teal { background: color-mix(in srgb, var(--teal-400) 14%, var(--surface)); } .museum-card.tone-blue { background: color-mix(in srgb, var(--blue) 13%, var(--surface)); } .museum-card.tone-pink { background: color-mix(in srgb, var(--pink) 13%, var(--surface)); } .museum-card.tone-coral { background: color-mix(in srgb, var(--coral) 13%, var(--surface)); } .museum-card.tone-yellow { background: color-mix(in srgb, var(--yellow) 16%, var(--surface)); } .museum-card > summary, .museum-card > .mc-body { position: relative; z-index: 1; } .museum-card:hover { box-shadow: var(--shadow-md); } .museum-card.is-hidden { display: none; } .mc-summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5); } .mc-summary::-webkit-details-marker { display: none; } .mc-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--r-lg); } .mc-summary-text { flex: 1; min-width: 0; } .mc-toggle { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--tile-c, var(--teal-600)); background: var(--bg-warm); transition: transform .25s ease; } .museum-card[open] .mc-toggle { transform: rotate(90deg); } .mc-toggle .icon { width: 18px; height: 18px; } .mc-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--sp-3); } .mc-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sp-3); } .mc-meta { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; gap: var(--sp-3); color: var(--ink-soft); font-size: var(--text-xs); font-weight: 600; } .mc-meta::-webkit-scrollbar { display: none; } .mc-meta span, .mc-meta a { flex: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } .mc-meta a { color: var(--ink-soft); } .mc-meta a:hover { color: var(--teal-600); } .mc-meta .icon { flex: none; width: .95em; height: .95em; color: var(--tile-c, var(--teal-600)); } .mc-body { padding: 0 var(--sp-5) var(--sp-5); } .museum-card[open] .mc-body { animation: tileReveal .28s ease; } .mc-hours { background: var(--bg-warm); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); } .mc-hours-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tile-c, var(--teal-600)); margin-bottom: var(--sp-3); } .mc-hours-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; } @media (min-width: 420px) { .mc-hours-grid { grid-template-columns: repeat(2, 1fr); } } .mc-hours-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--ink); } .mc-hours-days { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: .2rem; } .mc-hours-time { font-size: var(--text-sm); color: var(--ink-soft); } .mc-hours-last { display: flex; align-items: center; gap: .3rem; color: var(--color-danger); font-weight: 700; font-size: var(--text-xs); margin-top: .3rem; } .mc-hours-last .icon { width: .9em; height: .9em; color: var(--color-danger); } .mc-price { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--ink); background: var(--bg-warm); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0; } .mc-price .icon { color: var(--ink-soft); } .mc-price-free { background: var(--green-soft); color: var(--green); } .mc-price-free .icon { color: var(--green); } /* Kart zemini hangi ton olursa olsun ayırt edilsin diye sabit kırmızı — asla kart rengiyle karışmaz */ .mc-closed { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); } .mc-closed .icon { color: var(--color-danger); } .mc-musecard { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); font-weight: 600; color: #8b5cf6; margin: 0 0 var(--sp-4); } .mc-musecard .icon { color: #8b5cf6; } .mc-prices { margin-top: var(--sp-1); } .mc-prices .calc-open { display: flex; width: fit-content; margin: var(--sp-3) auto 0; } .mc-price-grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; } @media (min-width: 420px) { .mc-price-grid { grid-template-columns: repeat(2, 1fr); } } .mc-price-row { display: flex; flex-direction: column; } .mc-price-label { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; } .mc-price-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--ink); } .mc-price-value.mc-struck { text-decoration: line-through; color: var(--ink-faint); font-weight: 600; font-size: var(--text-sm); } .mc-price-sub { font-size: var(--text-xs); color: var(--ink-faint); margin-top: .1rem; } .mc-price-free-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; background: var(--green-soft); color: var(--green); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); } .mc-price-free-tag { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); } .mc-price-free-who { font-size: var(--text-sm); font-weight: 600; } /* İsme göre arama kutusu */ .museum-search { position: relative; margin-bottom: var(--sp-4); max-width: 420px; } .museum-search .icon { position: absolute; top: 50%; left: var(--sp-4); transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; } .museum-search input { width: 100%; padding: .75rem var(--sp-4) .75rem calc(var(--sp-4) + 1.6rem); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-size: var(--text-sm); } .museum-search input:focus { outline: none; border-color: var(--teal-400); box-shadow: var(--focus-ring); } .museum-search input::-webkit-search-cancel-button { cursor: pointer; } /* Rozete göre filtre çubuğu */ .museum-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-5); } .museum-filter .chip { cursor: pointer; border: 1px solid var(--border); background: var(--surface); opacity: .55; transition: opacity .15s ease, transform .15s ease; } .museum-filter .chip:hover { opacity: .85; } .museum-filter .chip.is-active { opacity: 1; box-shadow: var(--shadow-sm); } .museum-card.is-hidden { display: none; } .chip-amber { background: var(--yellow-soft); color: #92680f; border-color: transparent; } .chip-amber .icon { color: #92680f; } .chip-blue { background: var(--blue-soft); color: var(--blue); border-color: transparent; } .chip-blue .icon { color: var(--blue); } .chip-coral { background: var(--coral-soft); color: var(--coral); border-color: transparent; } .chip-coral .icon { color: var(--coral); } .chip-green { background: var(--green-soft); color: var(--green); border-color: transparent; } .chip-green .icon { color: var(--green); } /* Konya sayfası: ana kategoriler kapalı başlar (Merkez, İlçeler, Antik Miras, Mutfak) */ .category-list { display: grid; gap: var(--sp-4); } /* Sabit (sticky) site başlığının altında kalsın diye — tarayıcının #antik-miras gibi bir hash'e native olarak kaydırması da bu payı hesaba katar */ .category-tile { --cat-c: var(--teal-600); border: 1px solid transparent; border-radius: var(--r-xl); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; scroll-margin-top: 90px; } .category-tile:hover { box-shadow: var(--shadow-md); } .category-tile[open] { box-shadow: var(--shadow-md); border-color: var(--cat-c); } .category-tile.tone-teal { background: var(--teal-50); } .category-tile.tone-blue { --cat-c: var(--blue); background: var(--blue-soft); } .category-tile.tone-coral { --cat-c: var(--coral); background: var(--coral-soft); } .category-tile.tone-yellow { --cat-c: #C89211; background: var(--yellow-soft); } .category-tile > .cat-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); } .category-tile > .cat-summary::-webkit-details-marker { display: none; } .category-tile > .cat-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--r-xl); } .category-tile .cat-htext { flex: 1 1 auto; min-width: 140px; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .category-tile .cat-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--ink); } .category-tile .cat-n { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--ink-soft); white-space: nowrap; } .category-tile .cat-toggle { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--cat-c); background: color-mix(in srgb, var(--surface) 65%, transparent); transition: transform .25s ease; } .category-tile[open] > .cat-summary .cat-toggle { transform: rotate(90deg); } .category-tile .cat-toggle .icon { width: 20px; height: 20px; } .category-body { padding: 0 var(--sp-6) var(--sp-6); } .category-body .cat-sub { color: var(--ink-soft); font-size: var(--text-base); margin-bottom: var(--sp-5); max-width: 70ch; } .category-body .cat-stat-intro { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--ink); background: var(--bg-warm); border-left: 4px solid var(--tile-c, var(--teal-500)); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); } .category-tile[open] > .category-body { animation: tileReveal .3s ease; } @media (max-width: 560px) { .category-tile > .cat-summary { padding: var(--sp-4) var(--sp-5); gap: var(--sp-2); flex-wrap: wrap; } .category-tile .cat-htext { flex: 1 1 100%; min-width: 100%; } .category-tile .cat-title { font-size: var(--text-lg); } .category-tile .cat-meta { margin-left: auto; } .category-body { padding: 0 var(--sp-5) var(--sp-5); } } /* Konya Mutfağı — coğrafi işaret tescilli ürünler listesi */ .gi-block { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px dashed var(--border-strong); } .gi-logos-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); } .gi-logos-row img { width: 44px; height: 44px; object-fit: contain; } .gi-logos-row span { font-size: var(--text-xs); color: var(--ink-faint); font-weight: 600; max-width: 32ch; } .gi-heading { font-size: var(--text-xl); margin-bottom: var(--sp-5); } .gi-groups { display: grid; gap: var(--sp-5); } .gi-group { border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .gi-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); background: var(--tile-c, var(--teal-500)); color: #fff; padding: var(--sp-2) var(--sp-5); min-height: 44px; text-align: center; } .gi-group-head h4 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: #fff; } .gi-group-head .gi-count { color: rgba(255,255,255,.85); font-weight: 600; } .gi-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--sp-4) var(--sp-5); } .gi-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 600; color: var(--ink); background: var(--bg-warm); border: 1px solid var(--border); border-left: 3px solid var(--tile-c, var(--teal-500)); border-radius: var(--r-md); padding: .4rem .8rem; } .gi-mark { display: inline-block; object-fit: contain; flex: none; cursor: pointer; } .gi-subgroup { border-top: 1px dashed var(--border); } .gi-subgroup:first-child { border-top: none; } .gi-subgroup-head { display: flex; align-items: center; gap: .5rem; padding: var(--sp-4) var(--sp-5) 0; font-size: var(--text-xs); font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .03em; } .gi-subgroup .gi-chips { padding-top: var(--sp-3); } /* Rozetler küçük olduğu için okunmuyor — hover/tap ile büyütülmüş bir önizleme gösterilir (bkz. app.js) */ .gi-zoom-popup { display: none; position: fixed; z-index: 500; flex-direction: column; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-4); pointer-events: none; max-width: 200px; } .gi-zoom-popup img { width: 150px; height: 150px; object-fit: contain; } .gi-zoom-popup span { font-size: var(--text-xs); font-weight: 700; color: var(--ink); text-align: center; } /* İlçeler: iki seviyeli akordeon (ilçe > gezilecek yer > açıklama) */ .district-list { display: grid; gap: var(--sp-4); } .district-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .district-tile:hover { box-shadow: var(--shadow-md); } .district-tile[open] { box-shadow: var(--shadow-md); border-color: var(--teal-200); } .district-tile > .d-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); } .district-tile > .d-summary::-webkit-details-marker { display: none; } .district-tile > .d-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--r-lg); } .district-tile .d-htext { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; } .district-tile .d-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--teal-700); } .district-tile .d-count { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink-faint); } .district-tile .d-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--teal-600); background: var(--bg-warm); transition: transform .25s ease; } .district-tile[open] > .d-summary .d-toggle { transform: rotate(90deg); } .district-tile .d-toggle .icon { width: 20px; height: 20px; } .district-body { padding: 0 var(--sp-6) var(--sp-6); } .district-body .district-sub { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--sp-4); max-width: 65ch; } .district-tile[open] > .district-body { animation: tileReveal .28s ease; } @media (max-width: 560px) { .district-tile > .d-summary { padding: var(--sp-4) var(--sp-5); } .district-body { padding: 0 var(--sp-5) var(--sp-5); } } /* Manevi önderler */ .spiritual { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 760px) { .spiritual { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .spiritual { grid-template-columns: repeat(3, 1fr); } } .spirit-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-6); color: #fff; background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); box-shadow: var(--shadow-md); } .spirit-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 90% 10%, rgba(255,197,61,.22), transparent 60%); } .spirit-card > * { position: relative; } .spirit-card .sp-ico { width: 60px; height: 60px; border-radius: var(--r-md); background: rgba(255,255,255,.16); display: grid; place-items: center; color: #fff; margin-bottom: var(--sp-4); } .spirit-card h3 { color: #fff; font-size: var(--text-2xl); margin-bottom: var(--sp-3); } .spirit-card p { color: rgba(255,255,255,.9); } /* Yazı içi görsel */ .blog-figure { margin: var(--sp-6) 0; } .blog-figure button { display: block; width: 100%; padding: 0; border: none; background: var(--teal-50); border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-md); } .blog-figure img { width: 100%; max-height: 560px; object-fit: cover; display: block; transition: transform .4s ease; } .blog-figure button:hover img { transform: scale(1.03); } /* Sosyal paylaşım şeridi */ .share-row { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); } .share-label { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-4); } .share-label .icon { color: var(--teal-600); } .share-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .share-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--r-md); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); transition: transform .18s ease, filter .18s ease; } .share-btn:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); } .share-btn .icon { width: 18px; height: 18px; } .share-fb { background: #1877F2; } .share-tw { background: #1DA1F2; } .share-wa { background: #25D366; } .share-tg { background: #229ED9; } @media (max-width: 480px) { .share-btn span { display: none; } .share-btn { padding: .7rem; } .share-btn .icon { width: 20px; height: 20px; } } /* =========================================================================== Ücret Hesaplayıcı (müze modalı) =========================================================================== */ .calc-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(8,22,20,.72); backdrop-filter: blur(4px); } .calc-overlay.open { display: flex; } .calc-modal { width: 100%; max-width: 540px; max-height: 95vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .calc-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; } .calc-title { font-size: var(--text-lg); } .calc-close { flex: none; width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: var(--bg-warm); color: var(--ink); cursor: pointer; display: grid; place-items: center; } .calc-close:hover { border-color: var(--teal-400); color: var(--teal-600); } .calc-table-head { display: grid; grid-template-columns: 1fr 118px 90px; gap: var(--sp-3); padding: .5rem var(--sp-5); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); border-bottom: 1px solid var(--border); } .calc-table-head span:nth-child(2) { text-align: center; } .calc-table-head span:nth-child(3) { text-align: right; } .calc-row { display: grid; grid-template-columns: 1fr 118px 90px; gap: var(--sp-3); align-items: center; padding: .55rem var(--sp-5); border-bottom: 1px solid var(--border); } .calc-cat { min-width: 0; } .calc-label { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); } .calc-price { display: block; font-size: var(--text-sm); color: var(--ink-soft); margin-top: 0; } .calc-sub { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); color: var(--ink-faint); margin-top: .1rem; } .calc-sub .icon { width: .95em; height: .95em; } .calc-sub.active { color: var(--teal-600); font-weight: 700; } .calc-stepper { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .calc-step { width: 30px; height: 30px; flex: none; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-warm); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: border-color .15s ease, color .15s ease; } .calc-step:hover { border-color: var(--teal-400); color: var(--teal-600); } .calc-step .icon { width: 16px; height: 16px; } .calc-count { width: 44px; height: 30px; text-align: center; -moz-appearance: textfield; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--ink); } .calc-count::-webkit-outer-spin-button, .calc-count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc-count:focus { outline: none; border-color: var(--teal-400); box-shadow: var(--focus-ring); } .calc-rowtotal { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ink); } .calc-row.has-count { background: color-mix(in srgb, var(--teal-500) 6%, transparent); } .calc-row.has-count .calc-rowtotal { color: var(--teal-600); } .calc-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--bg-warm); border-radius: 0 0 var(--r-lg) var(--r-lg); } .calc-foot-cell { display: flex; flex-direction: column; } .calc-foot-cell:first-child { flex: 1; } .calc-foot-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); } .calc-foot-cell strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); } #calcTotal { color: var(--teal-600); } .calc-foot .btn { flex: none; } @media (max-width: 420px) { .calc-table-head, .calc-row { grid-template-columns: 1fr 104px 74px; gap: .5rem; padding-inline: var(--sp-4); } .calc-step { width: 30px; height: 30px; } .calc-count { min-width: 30px; } } /* Etkinlik Takvimi */ .page-hero h1 .accent { color: var(--teal-600); } .event-months { display: grid; gap: var(--sp-6); max-width: 720px; margin-inline: auto; } .event-month { border-radius: var(--r-lg); overflow: hidden; } .event-month-label { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); padding: var(--sp-3) var(--sp-5); background: var(--tile-c, var(--teal-500)); color: #fff; } .event-month-label::-webkit-details-marker { display: none; } .event-month-name { display: flex; align-items: center; gap: .55rem; } .event-month-total { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .3rem; border-radius: var(--r-full); background: rgba(255,255,255,.25); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; } .event-month-right { display: flex; align-items: center; gap: var(--sp-4); flex: none; } .event-month-count { font-family: var(--font-body); font-weight: 600; font-size: var(--text-xs); color: rgba(255,255,255,.85); white-space: nowrap; } .event-month-toggle { display: grid; place-items: center; transition: transform .25s ease; } .event-month[open] .event-month-toggle { transform: rotate(90deg); } .event-month.is-past .event-month-label { background: var(--ink-faint); } @media (max-width: 480px) { .event-month-label { flex-wrap: wrap; } .event-month-count { font-size: 11px; white-space: normal; } } .event-list { display: grid; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-2); margin-left: var(--sp-4); border-left: 3px dashed var(--border-strong); } .event-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } /* Zaman çizelgesi noktası yalnızca ay listesindeki kartlarda — "Yıl Boyu" ızgarasında bir önceki/sonraki tarih olmadığı için gerekmiyor */ .event-list .event-card::before { content: ""; position: absolute; top: var(--sp-5); left: calc(-1 * var(--sp-5) - 3px - 6px); width: 12px; height: 12px; border-radius: var(--r-full); background: var(--tile-c, var(--teal-500)); border: 2px solid var(--surface); } .ev-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5); } .ev-summary::-webkit-details-marker { display: none; } .ev-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--ink); } .ev-toggle { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--bg-warm); color: var(--tile-c, var(--teal-600)); transition: transform .25s ease; } .event-card[open] .ev-toggle { transform: rotate(90deg); } .ev-past-tag { flex: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); background: var(--bg-warm); padding: .25rem .6rem; border-radius: var(--r-full); } .ev-body { padding: 0 var(--sp-5) var(--sp-5); } .event-card[open] .ev-body { animation: tileReveal .28s ease; } .event-month[open] > .event-list { animation: tileReveal .28s ease; } .ev-date, .ev-loc { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--text-sm); color: var(--ink-soft); margin-top: .3rem; } .ev-date .icon, .ev-loc .icon { color: var(--tile-c, var(--teal-600)); flex: none; margin-top: .15em; } .ev-link { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--text-sm); color: var(--teal-600); margin-top: var(--sp-3); font-weight: 600; word-break: break-all; } .ev-link .icon { flex: none; margin-top: .15em; } .ev-link:hover { color: var(--teal-700); text-decoration: underline; } /* Günü geçmiş etkinlikler pasif/soluk görünür */ .event-card.is-past { opacity: .55; } .event-card.is-past .ev-name { color: var(--ink-soft); } .event-card.is-past:hover { opacity: .8; } @media (max-width: 480px) { .event-list { padding-left: var(--sp-4); margin-left: var(--sp-2); } } .event-year-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 620px) { .event-year-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .event-year-grid { grid-template-columns: repeat(3, 1fr); } } .event-year-grid .event-card { padding: var(--sp-5); border-top: 3px solid var(--tile-c, var(--teal-500)); } .event-year-grid .ev-name { display: block; margin-bottom: .3rem; } .event-year-grid .ev-date:first-of-type { margin-top: 0; } /* =========================================================================== Örnek Tur Programları (akordeon + zaman çizelgesi) =========================================================================== */ .tour-list { display: grid; gap: var(--sp-4); max-width: 820px; margin-inline: auto; } .tour-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; } .tour-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--tile-c, var(--teal-500)); z-index: 1; } .tour-card[open], .tour-card:hover { box-shadow: var(--shadow-md); border-color: var(--tile-c, var(--teal-200)); } .tour-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5); } .tour-summary::-webkit-details-marker { display: none; } .tour-summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--r-lg); } .tour-head { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--sp-3); } .tour-title { font-size: var(--text-xl); color: var(--tile-c, var(--teal-700)); } .tour-badge { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); color: var(--ink); background: var(--bg-warm); border: 1px solid var(--border); padding: .25rem .7rem; border-radius: var(--r-full); } .tour-badge .icon { width: .9em; height: .9em; color: var(--tile-c, var(--teal-600)); } .tour-toggle { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-full); color: var(--tile-c, var(--teal-600)); background: var(--bg-warm); transition: transform .25s ease; } .tour-card[open] .tour-toggle { transform: rotate(90deg); } .tour-body { padding: 0 var(--sp-5) var(--sp-5); } .tour-schedule { list-style: none; margin: 0; padding: 0; position: relative; } .tour-schedule::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); } .tour-row { position: relative; display: grid; grid-template-columns: 128px 1fr; gap: var(--sp-3); align-items: baseline; padding: .55rem 0 .55rem var(--sp-5); } .tour-row::before { content: ""; position: absolute; left: 2px; top: .95rem; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--tile-c, var(--teal-500)); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--tile-c, var(--teal-200)); } .tour-time { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .tour-act { color: var(--ink); } .tour-notes { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); display: grid; gap: var(--sp-3); } .tour-notes-head { display: flex; align-items: center; gap: .4rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--tile-c, var(--teal-700)); } .tour-note { display: block; font-size: var(--text-sm); color: var(--ink-soft); padding-left: var(--sp-4); position: relative; line-height: 1.6; } .tour-note::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--tile-c, var(--teal-400)); } .tour-note a { color: var(--tile-c, var(--teal-700)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 480px) { .tour-row { grid-template-columns: 1fr; gap: .15rem; } .tour-time { color: var(--tile-c, var(--teal-600)); } } /* =========================================================================== Rehber'den filtreleri (kategori + yazar) =========================================================================== */ .blog-filters { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); } .blog-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--sp-3); } .blog-filter-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; min-width: 72px; } .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; } /* Renkli filtre chip'leri: pasifte yumuşak zemin + renkli metin/ikon, aktifte dolu renk */ .filter-chips .chip { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); padding: .42rem .85rem; border-radius: var(--r-full); border: 1.5px solid transparent; background: var(--fc-soft, var(--bg-warm)); color: var(--fc-text, var(--ink)); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .filter-chips .chip .icon { width: 1em; height: 1em; color: var(--fc, var(--teal-600)); } .filter-chips .chip b { font-weight: 800; opacity: .65; } .filter-chips .chip:hover { transform: translateY(-1px); } .filter-chips .chip.is-active { background: var(--fc, var(--teal-500)); color: #fff; box-shadow: var(--shadow-sm); } .filter-chips .chip.is-active .icon, .filter-chips .chip.is-active b { color: #fff; opacity: .9; } .filter-chips .fc-all { --fc: var(--teal-500); --fc-soft: var(--bg-warm); --fc-text: var(--ink); } /* Ton eşlemeleri (chip-) — parlak (aksan), koyu (metin), yumuşak (zemin) */ .filter-chips .chip-teal { --fc: #14A89E; --fc-text: #0C766F; --fc-soft: #E7F7F4; } .filter-chips .chip-blue { --fc: #3E9EE6; --fc-text: #1F6FA8; --fc-soft: #E6F2FC; } .filter-chips .chip-pink { --fc: #FF6FA0; --fc-text: #C13A6B; --fc-soft: #FFE7F0; } .filter-chips .chip-coral { --fc: #FF8256; --fc-text: #BF5029; --fc-soft: #FFECE3; } .filter-chips .chip-yellow { --fc: #E0A21A; --fc-text: #8A6008; --fc-soft: #FFF4DA; } .filter-chips .chip-purple { --fc: #9B7BE8; --fc-text: #6B4BC4; --fc-soft: #F0EBFC; } .filter-chips .chip-green { --fc: #43C08A; --fc-text: #1F8A5F; --fc-soft: #E4F7EE; } .filter-chips .chip-rose { --fc: #F2606B; --fc-text: #C22B3A; --fc-soft: #FDE9EA; } .filter-chips .chip-cyan { --fc: #35BEDC; --fc-text: #0F7E96; --fc-soft: #E3F6FA; } .filter-chips .chip-amber { --fc: #F5B93B; --fc-text: #8A6008; --fc-soft: #FFF4DA; } [data-theme="dark"] .filter-chips .chip:not(.is-active) { background: color-mix(in srgb, var(--fc) 16%, var(--surface)); color: color-mix(in srgb, var(--fc) 55%, var(--ink)); } .blog-card.is-hidden { display: none; } .blog-empty { display: flex; align-items: center; gap: .5rem; justify-content: center; padding: var(--sp-8); color: var(--ink-soft); font-weight: 600; } .blog-empty[hidden] { display: none; } .blog-empty .icon { color: var(--teal-600); } /* Yönetim paneli */ .yonetim-loading, .yonetim-msg { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: var(--sp-8); color: var(--ink-soft); font-weight: 600; text-align: center; } .yonetim-msg.is-error { color: var(--coral); } .yonetim-login-form { max-width: 320px; margin: var(--sp-8) auto; display: grid; gap: var(--sp-3); } .yonetim-login-form label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); } .yonetim-login-form input { padding: .7rem var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: var(--text-base); } .yonetim-login-form input:focus { outline: 2px solid var(--teal-400); outline-offset: 1px; } .yonetim-login-error { color: var(--coral); font-size: var(--text-sm); font-weight: 600; margin: 0; } .yonetim-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-6); } .yonetim-range { display: flex; gap: .4rem; background: var(--bg-warm); padding: .3rem; border-radius: var(--r-full); } .yonetim-range button { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); padding: .45rem 1rem; border-radius: var(--r-full); color: var(--ink-soft); background: transparent; } .yonetim-range button.is-active { background: var(--teal-500); color: #fff; } .yonetim-logout { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--coral); text-decoration: underline; text-underline-offset: 3px; } .yonetim-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-6); } @media (min-width: 700px) { .yonetim-stats { grid-template-columns: repeat(4, 1fr); } } .yonetim-stat { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--tile-c, var(--teal-500)); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); display: flex; flex-direction: column; gap: .3rem; } .ys-num { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--ink); } .ys-label { font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; } .yonetim-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); margin-bottom: var(--sp-5); } .yonetim-panel h2 { font-size: var(--text-lg); margin-bottom: var(--sp-4); } .yonetim-empty { color: var(--ink-faint); font-size: var(--text-sm); } .yonetim-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; } .yonetim-bar { flex: 1; min-width: 3px; background: var(--teal-400); border-radius: 3px 3px 0 0; transition: background .15s ease; } .yonetim-bar:hover { background: var(--teal-600); } .yonetim-table-wrap { overflow-x: auto; } .yonetim-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--text-sm); } .yonetim-table th { text-align: left; font-family: var(--font-display); font-weight: 700; color: var(--ink-soft); padding: .5rem .6rem; border-bottom: 1px solid var(--border-strong); } .yonetim-table td { padding: .6rem; border-bottom: 1px solid var(--border); vertical-align: top; } .yonetim-table tr:last-child td { border-bottom: none; } .yonetim-table a { font-weight: 700; color: var(--teal-700); } .yonetim-path { display: block; color: var(--ink-faint); font-size: var(--text-xs); word-break: break-all; } .yonetim-devices { display: grid; gap: var(--sp-3); } .yonetim-device-row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); } .yonetim-device-bar { height: 10px; border-radius: var(--r-full); background: var(--bg-warm); overflow: hidden; } .yonetim-device-bar > div { height: 100%; background: var(--teal-500); } .yonetim-panels-2col { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 760px) { .yonetim-panels-2col { grid-template-columns: repeat(2, 1fr); } } .yonetim-panels-2col .yonetim-panel { margin-bottom: 0; } .donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); } .donut-chart { flex: none; width: 140px; height: 140px; border-radius: 50%; position: relative; } .donut-chart::after { content: ""; position: absolute; inset: 22%; background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); } .donut-legend { display: grid; gap: .5rem; flex: 1; min-width: 160px; } .donut-legend-item { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); } .legend-dot { flex: none; width: 12px; height: 12px; border-radius: var(--r-full); } .legend-label { flex: 1; color: var(--ink); font-weight: 600; } .legend-value { color: var(--ink-faint); font-size: var(--text-xs); white-space: nowrap; } @media (max-width: 480px) { .ys-num { font-size: var(--text-xl); white-space: nowrap; } } /* guides.css */ /* =========================================================================== KTR Web — Kompakt rehber listesi (satır stili + fotoğraf büyütme) =========================================================================== */ .guide-rows { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); list-style: none; } @media (min-width: 720px) { .guide-rows { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } } @media (min-width: 1060px) { .guide-rows { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } } .guide-row { position: relative; display: flex; align-items: center; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .guide-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 var(--r-full) var(--r-full) 0; background: var(--row-c, var(--teal-500)); } .guide-row:hover { border-color: var(--row-c, var(--teal-200)); box-shadow: var(--shadow-md); transform: translateY(-2px); } .guide-row:has(.gr-photo:hover), .guide-row:has(.gr-photo.zoomed) { z-index: 20; } /* — Fotoğraf kutusu — */ .gr-photo { position: relative; flex: none; width: 76px; height: 76px; border-radius: var(--r-md); border: none; padding: 0; background: var(--teal-50); overflow: visible; cursor: zoom-in; } .gr-photo > img, .gr-photo > .gr-initials { width: 76px; height: 76px; border-radius: var(--r-md); object-fit: cover; display: block; } span.gr-photo { cursor: default; } .gr-initials { display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; background: var(--row-c, var(--teal-500)); } /* Büyütülmüş önizleme (hover / dokunma) */ .gr-preview { position: absolute; left: 0; top: -8px; width: min(240px, 60vw); transform: scale(.88); transform-origin: top left; opacity: 0; pointer-events: none; z-index: 30; border-radius: var(--r-lg); overflow: hidden; border: 5px solid var(--surface); box-shadow: var(--shadow-lg); background: var(--teal-50); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.3,1); } .gr-preview img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } @media (hover: hover) and (pointer: fine) { .gr-photo:hover .gr-preview, .gr-photo:focus-visible .gr-preview { opacity: 1; transform: scale(1); } } .gr-photo.zoomed { cursor: zoom-out; } .gr-photo.zoomed .gr-preview { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { .gr-preview { transition: opacity .01ms; } } /* — Satır gövdesi — Bağlantı tüm kartı kaplar (ok tuşu dahil her yer tıklanabilir); fotoğraf butonu üstte kalır ki büyütme ayrı çalışsın. */ .gr-body { flex: 1; min-width: 0; display: block; } .gr-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; } .gr-photo { z-index: 2; } .gr-go { z-index: 0; } .gr-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--row-t, var(--teal-700)); line-height: 1.25; } .gr-desc { display: block; font-size: var(--text-sm); color: var(--ink-soft); margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-desc.pending { color: var(--ink-faint); font-style: italic; } .gr-meta { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin-top: .3rem; } .gr-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); background: var(--bg-warm); border: 1px solid var(--border); padding: .1rem .5rem; border-radius: var(--r-full); } .gr-tag .icon { width: .9em; height: .9em; color: var(--row-t, var(--teal-600)); } .gr-go { flex: none; color: var(--row-t, var(--teal-600)); display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-full); transition: background .18s ease, transform .18s ease; } .guide-row:hover .gr-go { background: var(--bg-warm); transform: translateX(2px); } /* Klavye odağında tüm kart vurgulansın */ .guide-row:has(.gr-body:focus-visible) { box-shadow: var(--focus-ring), var(--shadow-md); border-color: var(--row-c, var(--teal-400)); } .gr-body:focus-visible { outline: none; } /* — 12 renk tonu: parlak (aksan) + koyu (metin, kontrast) + yumuşak (zemin) — */ .row-teal, .gtheme.row-teal { --row-c: #14A89E; --row-t: #0C766F; --row-soft: #E7F7F4; } .row-blue, .gtheme.row-blue { --row-c: #3E9EE6; --row-t: #1F6FA8; --row-soft: #E6F2FC; } .row-pink, .gtheme.row-pink { --row-c: #FF6FA0; --row-t: #C13A6B; --row-soft: #FFE7F0; } .row-coral, .gtheme.row-coral { --row-c: #FF8256; --row-t: #BF5029; --row-soft: #FFECE3; } .row-green, .gtheme.row-green { --row-c: #43C08A; --row-t: #1F8A5F; --row-soft: #E4F7EE; } .row-purple, .gtheme.row-purple { --row-c: #9B7BE8; --row-t: #6B4BC4; --row-soft: #F0EBFC; } .row-amber, .gtheme.row-amber { --row-c: #F5B93B; --row-t: #8A6008; --row-soft: #FFF4DA; } .row-indigo, .gtheme.row-indigo { --row-c: #6C7BE0; --row-t: #4451B8; --row-soft: #EBEDFC; } .row-rose, .gtheme.row-rose { --row-c: #F2606B; --row-t: #C22B3A; --row-soft: #FDE9EA; } .row-cyan, .gtheme.row-cyan { --row-c: #35BEDC; --row-t: #0F7E96; --row-soft: #E3F6FA; } .row-olive, .gtheme.row-olive { --row-c: #8FB93B; --row-t: #5A7717; --row-soft: #F1F7E0; } .row-plum, .gtheme.row-plum { --row-c: #C86BC0; --row-t: #92368B; --row-soft: #FAEAF8; } /* Karanlık mod: aynı 12 ton, koyu zemine göre parlaklığı ters çevrilmiş değerler */ [data-theme="dark"] .row-teal { --row-c: #2DD4C0; --row-t: #8FEFE2; --row-soft: #10302C; } [data-theme="dark"] .row-blue { --row-c: #5CB2F5; --row-t: #AED8FB; --row-soft: #10222E; } [data-theme="dark"] .row-pink { --row-c: #FF8FBB; --row-t: #FFC7DE; --row-soft: #2B1421; } [data-theme="dark"] .row-coral { --row-c: #FF9B72; --row-t: #FFCDB3; --row-soft: #2B1810; } [data-theme="dark"] .row-green { --row-c: #5AD69F; --row-t: #A9EFCB; --row-soft: #10291F; } [data-theme="dark"] .row-purple { --row-c: #B39BF2; --row-t: #DACCFA; --row-soft: #1E1A2E; } [data-theme="dark"] .row-amber { --row-c: #FFCE5C; --row-t: #FFE29B; --row-soft: #2B2210; } [data-theme="dark"] .row-indigo { --row-c: #8D9AF2; --row-t: #C7CEFA; --row-soft: #191C2E; } [data-theme="dark"] .row-rose { --row-c: #FF8992; --row-t: #FFC7CB; --row-soft: #2B1518; } [data-theme="dark"] .row-cyan { --row-c: #5CD2EA; --row-t: #AEE9F3; --row-soft: #0F262B; } [data-theme="dark"] .row-olive { --row-c: #B4D65C; --row-t: #DCEEAE; --row-soft: #1E2610; } [data-theme="dark"] .row-plum { --row-c: #E091D8; --row-t: #F2D2ED; --row-soft: #2B1929; } /* Kategori başlığı sayacı */ .cat-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 .5rem; border-radius: var(--r-full); background: var(--teal-500); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); margin-left: .5rem; } .cat-count.alt { background: var(--blue); } /* Mobilde biraz daha sıkı */ @media (max-width: 480px) { .guide-row { gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); } .gr-photo, .gr-photo > img, .gr-photo > .gr-initials { width: 64px; height: 64px; } .gr-name { font-size: 1rem; } } /* =========================================================================== Rehber profili teması — sayfanın tamamına rehberin rengi hâkim olur =========================================================================== */ .gtheme { --g-c: var(--row-c, var(--teal-500)); --g-t: var(--row-t, #0C766F); --g-soft: var(--row-soft, var(--teal-50)); } /* Üst şerit */ .gtheme { border-top: 5px solid var(--g-c); } .gtheme .page-hero { background: var(--g-soft); } .gtheme .page-hero::before { background: radial-gradient(50% 60% at 92% 8%, color-mix(in srgb, var(--surface) 60%, transparent), transparent 60%), radial-gradient(45% 55% at 4% 96%, color-mix(in srgb, var(--surface) 45%, transparent), transparent 60%); } /* Sayfanın tamamında renk devam etsin: her bölüm dönüşümlü yönde soluklaşan bir zemin alır */ .gtheme section:not(.page-hero):nth-of-type(odd) { background: linear-gradient(100deg, var(--g-soft) 0%, transparent 65%); } .gtheme section:not(.page-hero):nth-of-type(even) { background: linear-gradient(260deg, var(--g-soft) 0%, transparent 65%); } /* Metin ve vurgular */ .gtheme .breadcrumb a { color: var(--g-t); } .gtheme .eyebrow { color: var(--g-t); background: color-mix(in srgb, var(--surface) 80%, transparent); } .gtheme .eyebrow .icon { color: var(--g-t); } .gtheme h1, .gtheme .section-title { color: var(--g-t); } .gtheme .prose h2, .gtheme .prose h3 { color: var(--g-t); } .gtheme .prose h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: .5rem; border-radius: var(--r-full); background: var(--g-c); } /* Bileşenler */ .gtheme .chip-teal { background: var(--g-c); } .gtheme .chip { border-color: var(--g-c); } .gtheme .chip .icon { color: var(--g-t); } .gtheme .btn-primary { background: var(--g-c); box-shadow: 0 12px 28px rgba(12,91,86,.2); } .gtheme .btn-primary:hover { background: var(--g-t); } .gtheme .btn-ghost { color: var(--g-t); } .gtheme .btn-ghost:hover { border-color: var(--g-c); color: var(--g-t); } .gtheme .info-item { border-top: 3px solid var(--g-c); } .gtheme .info-item .k { color: var(--g-t); } .gtheme .profile-photo { box-shadow: 0 10px 30px rgba(12,91,86,.18), 0 0 0 4px var(--g-c); } .gtheme .profile-photo-empty { background: linear-gradient(135deg, var(--g-c), var(--g-t)); } .gtheme .gallery-grid a:hover { box-shadow: 0 0 0 3px var(--g-c), var(--shadow-md); } .gtheme .gallery-thumb.is-active { border-color: var(--g-c); } .gtheme .gallery-arrow { color: var(--g-t); } .gtheme .gallery-arrow:hover { background: var(--g-soft); } .gtheme .social-icon { color: var(--g-t); } .gtheme .social-icon:hover { border-color: var(--g-c); background: var(--g-soft); } .gtheme .callout { background: var(--g-soft); border-color: var(--g-c); color: var(--ink); } .gtheme .callout .icon { color: var(--g-t); } .gtheme .lightbox { background: color-mix(in srgb, var(--g-t) 92%, black); } /* "Diğer rehberler" bölümü de sayfa rengini alsın ki bütünlük bozulmasın */ .gtheme .guide-row { --row-c: var(--g-c); --row-t: var(--g-t); }