/** * ferhateranemlak.com | kodbizde.com tarafından geliştirilmiştir © 2026 */
/* =========================================================
Ferhat Eran Emlak — Master Stylesheet
Premium, modern, kurumsal emlak frontendi
========================================================= */
:root{
--c-primary: #0b2545; /* Lacivert */
--c-primary-2: #13315c;
--c-primary-3: #1a4480;
--c-accent: #d4a256; /* Şampanya altın */
--c-accent-2: #c08f43;
--c-text: #1d2939;
--c-muted: #667085;
--c-border: #e6e8ee;
--c-light: #f6f8fb;
--c-light-2: #eef2f7;
--c-success: #16a34a;
--c-danger: #dc2626;
--c-white: #ffffff;
--shadow-sm: 0 2px 6px rgba(15,23,42,.06);
--shadow-md: 0 8px 24px rgba(15,23,42,.08);
--shadow-lg: 0 18px 48px rgba(15,23,42,.14);
--radius: 14px;
--radius-sm: 10px;
--radius-lg: 22px;
--max-w: 1280px;
--t: .35s cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
color:var(--c-text);
background:#fff;
line-height:1.6;
font-size:15.5px;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
a:hover{color:var(--c-accent)}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4,h5{font-family:'Playfair Display',serif;color:var(--c-primary);margin:0;line-height:1.2}
h1{font-size:clamp(2rem,4.5vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1rem}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
/* Buttons */
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:12px 22px;border-radius:50px;
font-weight:600;font-size:14.5px;
transition:all var(--t);white-space:nowrap;
border:1.5px solid transparent;cursor:pointer;
}
.btn i{font-size:13px}
.btn-primary{background:var(--c-accent);color:#1a1a1a;border-color:var(--c-accent)}
.btn-primary:hover{background:var(--c-accent-2);border-color:var(--c-accent-2);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(212,162,86,.4)}
.btn-outline{border-color:var(--c-primary);color:var(--c-primary)}
.btn-outline:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px)}
.btn-ghost{color:var(--c-primary);background:#fff}
.btn-ghost:hover{background:var(--c-light)}
.btn-light{background:#fff;color:var(--c-primary)}
.btn-light:hover{background:var(--c-accent);color:#1a1a1a;transform:translateY(-2px)}
.btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1)}
.btn-lg{padding:15px 30px;font-size:15px}
/* Topbar */
.topbar{background:var(--c-primary);color:rgba(255,255,255,.78);font-size:12.5px;padding:10px 0;letter-spacing:.2px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-left{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.dot-sep{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
.topbar-right{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.topbar-right a:hover{color:var(--c-accent)}
.socials{display:flex;gap:4px;margin-left:6px}
.socials a{
width:28px;height:28px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);font-size:11px;
}
.socials a:hover{background:var(--c-accent);color:#1a1a1a}
/* Header */
.header{
background:#fff;
position:sticky;top:0;z-index:100;
box-shadow:var(--shadow-sm);
transition:box-shadow var(--t),background var(--t);
}
.header.scrolled{box-shadow:var(--shadow-md)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* Yüklenmiş logo görselleri (ayarlardan) */
.site-logo{
display:block;
width:auto;object-fit:contain;
}
/* Header — sabit yükseklik (kullanıcı görsel logosunu net göstersin) */
.site-logo.lg-header{
height:60px; /* sabit, küçük kalmaz */
width:auto;
max-width:240px;
min-width:120px;
}
/* Logo bağlantısı header içinde uzayan logoyu hizalasın */
.header .logo{align-items:center}
/* Footer — biraz daha geniş */
.site-logo.lg-footer{height:46px;max-width:200px}
/* Footer'da paylaşılan (header) logo varsa beyazlat; özel footer_logo yüklendiyse koruma */
.site-logo.lg-footer.is-shared{filter:brightness(0) invert(1)}
@media (max-width:1100px){
.site-logo.lg-header{height:52px;max-width:200px}
}
@media (max-width:680px){
.site-logo.lg-header{height:44px;max-width:160px;min-width:100px}
.site-logo.lg-footer{height:38px;max-width:170px}
}
.logo-mark{
width:44px;height:44px;border-radius:50%;
background:var(--c-primary);
color:#fff;display:flex;align-items:center;justify-content:center;
font-family:'Playfair Display',serif;font-weight:700;font-size:18px;
letter-spacing:0;
}
.logo-mark span{font-size:13px;color:var(--c-accent);margin-left:0;font-weight:700}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text strong{color:var(--c-primary);font-size:18px;font-weight:700;letter-spacing:-.3px}
.logo-text small{color:var(--c-muted);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;font-family:'Plus Jakarta Sans',sans-serif;margin-top:3px;font-weight:500}
.nav{display:flex;gap:4px;flex:1;justify-content:center}
/* Desktop: drawer'a özel parçaları gizle (mobilde @media bunları gösterir) */
.nav-mobile-head,.nav-mobile-foot,.nav-backdrop{display:none}
.nav-links{display:contents}
.nav a{
position:relative;padding:10px 16px;font-weight:500;font-size:14px;color:var(--c-text);
letter-spacing:.2px;
}
.nav a::after{
content:"";position:absolute;left:50%;bottom:0;
width:0;height:2px;background:var(--c-accent);transition:all var(--t);
transform:translateX(-50%);
}
.nav a:hover,.nav a.active{color:var(--c-primary)}
.nav a:hover::after,.nav a.active::after{width:22px}
/* Özel "tool" linki — Mülk Bul (sade, kurumsal) */
.nav a.nav-tool{
margin:0 6px;
padding:9px 18px;
background:#fff;
border:1px solid var(--c-primary);
color:var(--c-primary);font-weight:600;
letter-spacing:.3px;font-size:13px;
transition:all .2s ease;
}
.nav a.nav-tool::after{display:none}
.nav a.nav-tool:hover{
background:var(--c-primary);color:#fff;
}
.nav a.nav-tool.active{
background:var(--c-primary);color:#fff;
}
.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .btn{padding:11px 22px;font-size:13px;letter-spacing:.5px}
.hamburger{display:none;width:42px;height:42px;border-radius:8px;background:var(--c-light);position:relative}
.hamburger span{
display:block;width:20px;height:2px;background:var(--c-primary);
position:absolute;left:50%;transform:translateX(-50%);transition:all var(--t);
}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:26px}
.hamburger.open span:nth-child(1){top:20px;transform:translateX(-50%) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){top:20px;transform:translateX(-50%) rotate(-45deg)}
/* Hero — editorial split layout (sakin, magazine hissi) */
.hero{
background:#fafaf7;
border-bottom:1px solid var(--c-border);
overflow:hidden;
}
.hero-grid{
display:grid;grid-template-columns:1fr 1.05fr;
min-height:460px;align-items:stretch;
}
.hero-text{
padding:60px 80px 60px 90px;
display:flex;flex-direction:column;justify-content:center;
max-width:680px;
}
.hero-text .kicker{
font-size:11px;letter-spacing:4px;text-transform:uppercase;
color:var(--c-accent);font-weight:600;margin-bottom:28px;
display:flex;align-items:center;gap:14px;
}
.hero-text .kicker::before{
content:"";width:32px;height:1px;background:var(--c-accent);
}
.hero-text h1{
font-family:'Playfair Display',serif;
font-size:clamp(2rem,2.8vw,2.6rem);
line-height:1.1;letter-spacing:-.8px;
color:var(--c-primary);font-weight:500;
margin:0 0 16px;
}
.hero-text h1 em{font-style:italic;color:var(--c-primary-2);font-weight:500}
.hero-text > p{
font-size:14.5px;color:var(--c-muted);
max-width:440px;margin:0 0 26px;line-height:1.7;
}
.hero-text .kicker{margin-bottom:18px}
/* Hero search — inline, ince çizgili */
.hero-search{
display:flex;flex-direction:column;gap:22px;
align-items:flex-start;
}
.hs-row{
display:flex;align-items:stretch;
background:#fff;border:1px solid var(--c-border);
border-radius:50px;padding:6px 8px;
}
.hs-row select{
appearance:none;-webkit-appearance:none;border:0;outline:0;
background:url("data:image/svg+xml;utf8,") right 6px center/8px no-repeat;
padding:10px 24px 10px 16px;
font:inherit;font-weight:600;font-size:13px;color:var(--c-primary);
cursor:pointer;letter-spacing:.2px;
}
.hs-row .sep{
width:1px;background:var(--c-border);align-self:center;height:24px;
}
.hs-submit{
background:var(--c-primary);color:#fff;
padding:13px 30px;border-radius:50px;
font:inherit;font-weight:600;font-size:13px;
letter-spacing:.5px;transition:all var(--t);
}
.hs-submit:hover{background:var(--c-accent);color:#1a1a1a;transform:translateX(3px)}
.hero-meta{
margin-top:50px;padding-top:24px;
border-top:1px solid var(--c-border);
display:flex;align-items:center;gap:14px;font-size:13.5px;
}
.hm-link{color:var(--c-primary);font-weight:600;letter-spacing:.3px}
.hm-link:hover{color:var(--c-accent)}
.hm-sep{color:var(--c-muted)}
/* Hero — sağ taraf: Hızlı Talep formu */
.hero-form-wrap{
position:relative;
background:
linear-gradient(135deg,rgba(8,18,38,.88) 0%,rgba(20,38,68,.78) 60%,rgba(8,18,38,.92) 100%),
url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400&auto=format&fit=crop') center/cover;
display:flex;align-items:center;justify-content:center;
padding:50px 60px;
isolation:isolate;
}
/* Süptil çapraz çizgi dokusu */
.hero-form-wrap::before{
content:"";position:absolute;inset:0;
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,.018) 0,
rgba(255,255,255,.018) 1px,
transparent 1px,
transparent 14px);
pointer-events:none;z-index:0;
}
/* Alt sağdan yükselen altın aydınlatma */
.hero-form-wrap::after{
content:"";position:absolute;
right:-180px;bottom:-180px;
width:520px;height:520px;border-radius:50%;
background:radial-gradient(circle,rgba(212,162,86,.18),transparent 65%);
pointer-events:none;z-index:0;
filter:blur(8px);
}
/* Üstten ince altın çizgi vurgusu */
.hero-form-wrap > .hero-form::before{
content:"";position:absolute;
left:0;top:-30px;width:60px;height:1px;
background:linear-gradient(90deg,var(--c-accent),transparent);
}
.hero-form{
position:relative;z-index:2;
width:100%;max-width:480px;color:#fff;
}
.hero-form .hf-field input,
.hero-form .hf-field select,
.hero-form .hf-field textarea{
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
background:rgba(255,255,255,.08);
}
.hf-kicker{
display:inline-flex;align-items:center;gap:12px;
font-size:11px;letter-spacing:4px;text-transform:uppercase;
color:var(--c-accent);font-weight:600;margin-bottom:20px;
}
.hf-kicker::before{
content:"";width:28px;height:1px;background:var(--c-accent);
}
.hf-title{
font-family:'Playfair Display',serif;
color:#fff;font-size:30px;font-weight:500;
line-height:1.15;letter-spacing:-.5px;margin:0 0 14px;
}
.hf-title em{font-style:italic;color:var(--c-accent);font-weight:600}
.hf-sub{
color:rgba(255,255,255,.65);font-size:14px;margin:0 0 28px;
line-height:1.6;
}
.hf-form{display:flex;flex-direction:column;gap:14px}
.hf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hf-field{display:flex;flex-direction:column}
.hf-field label{
font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
color:rgba(255,255,255,.55);font-weight:600;margin-bottom:7px;
}
.hf-field input,.hf-field select,.hf-field textarea{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:2px;
padding:11px 14px;
color:#fff;font:inherit;font-size:13.5px;
outline:none;transition:all var(--t);
width:100%;
}
.hf-field input::placeholder,.hf-field textarea::placeholder{
color:rgba(255,255,255,.4);
}
.hf-field input:focus,.hf-field select:focus,.hf-field textarea:focus{
border-color:var(--c-accent);background:rgba(255,255,255,.1);
}
.hf-field select{
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;background-size:9px;
padding-right:34px;
}
.hf-field select option{background:#0b2545;color:#fff}
.hf-field textarea{resize:vertical;min-height:54px;font-family:inherit}
.hf-submit{
background:var(--c-accent);color:#1a1a1a;
padding:14px 24px;border-radius:2px;
font:inherit;font-weight:700;font-size:13.5px;letter-spacing:.5px;
margin-top:6px;cursor:pointer;transition:all var(--t);
}
.hf-submit:hover{background:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(0,0,0,.4)}
.hf-submit:disabled{background:rgba(255,255,255,.15);color:var(--c-accent);cursor:default;transform:none;box-shadow:none}
.hf-foot{
margin:14px 0 0;font-size:11.5px;letter-spacing:.3px;
color:rgba(255,255,255,.45);text-align:center;
}
/* Search Box — kompakt, ince */
.search-box{
background:rgba(255,255,255,.97);
backdrop-filter:blur(14px);
border-radius:2px;
padding:0;
box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
color:var(--c-text);
max-width:580px;
border:1px solid rgba(255,255,255,.6);
}
.search-form{
display:grid;
grid-template-columns:repeat(3,1fr) auto;
align-items:stretch;
}
.search-form .field{
padding:16px 18px;border-right:1px solid var(--c-border);
display:flex;align-items:center;
}
.search-form .field:last-of-type{border-right:0}
.search-form select,.search-form input{
width:100%;border:0;background:transparent;
font:inherit;color:var(--c-primary);font-weight:600;
padding:0;font-size:13.5px;outline:0;letter-spacing:.2px;
}
.search-form select{
appearance:none;-webkit-appearance:none;
background:url("data:image/svg+xml;utf8,") right center/8px no-repeat;
padding-right:16px;cursor:pointer;
}
.btn-search{
background:var(--c-primary);color:#fff;
padding:0 32px;
font-weight:600;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;
transition:all var(--t);
}
.btn-search:hover{background:var(--c-accent);color:#1a1a1a}
.hero-dots{
position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
display:flex;gap:10px;
}
.hero-dots .dot{
width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;
transition:all var(--t);
}
.hero-dots .dot.active{background:var(--c-accent);width:24px;border-radius:50px}
/* Sections */
.section{padding:100px 0;position:relative}
.section-light{background:var(--c-light)}
.section-dark{background:var(--c-primary);color:#fff}
.section-head{text-align:center;max-width:640px;margin:0 auto 60px}
.section-head .eyebrow{color:var(--c-accent);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:3px;display:block;margin-bottom:14px}
.section-head h2{margin-bottom:16px;font-weight:600;letter-spacing:-.5px}
.section-head p{color:var(--c-muted);font-size:15.5px}
.section-head-light h2,.section-head-light{color:#fff}
.section-head-light p{color:rgba(255,255,255,.7)}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;text-align:left;max-width:none;flex-wrap:wrap;gap:24px}
.row-head h2{margin-bottom:0}
/* Categories */
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{
position:relative;padding:36px 28px 30px;border-radius:6px;
background:#fff;border:1px solid var(--c-border);
transition:all var(--t);overflow:hidden;display:block;text-align:left;
}
.cat-card::after{
content:"";position:absolute;left:28px;bottom:30px;
width:24px;height:1px;background:var(--c-accent);
transition:width var(--t);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--c-accent)}
.cat-card:hover::after{width:60px}
.cat-icon{
width:54px;height:54px;border-radius:50%;
background:var(--c-light);
display:flex;align-items:center;justify-content:center;
font-size:22px;color:var(--c-primary);margin-bottom:22px;
transition:all var(--t);
}
.cat-card:hover .cat-icon{background:var(--c-primary);color:var(--c-accent)}
.cat-card h3{margin-bottom:4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:16.5px;font-weight:700;letter-spacing:.2px}
.cat-card span{color:var(--c-muted);font-size:12.5px;letter-spacing:.3px}
/* Filter pills */
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{
padding:9px 18px;border-radius:50px;background:#fff;
border:1px solid var(--c-border);font-size:13.5px;font-weight:600;
color:var(--c-muted);transition:all var(--t);
}
.pill:hover{color:var(--c-primary);border-color:var(--c-primary)}
.pill.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
/* Listings */
.listings{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.listing{
background:#fff;border-radius:4px;overflow:hidden;
transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease,border-color .35s ease;
display:flex;flex-direction:column;border:1px solid var(--c-border);
position:relative;
}
.listing::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--c-accent);
transform:scaleX(0);transform-origin:left;
transition:transform .55s cubic-bezier(.2,.7,.2,1);
z-index:5;
}
.listing:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px -25px rgba(11,37,69,.3);
border-color:transparent;
}
.listing:hover::after{transform:scaleX(1)}
.listing-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-light)}
.listing-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.listing:hover .listing-media img{transform:scale(1.08)}
/* Hover overlay — koyu örtü + ortada "Detayları Gör" linki */
.listing-media::before{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(180deg,rgba(11,37,69,0) 0%,rgba(11,37,69,.55) 100%);
opacity:0;transition:opacity .5s ease;
pointer-events:none;
}
.listing:hover .listing-media::before{opacity:1}
.listing-media::after{
content:"";position:absolute;inset:auto 0 0 0;height:45%;
background:linear-gradient(to top,rgba(6,15,30,.4),transparent);
pointer-events:none;
}
/* Resim üzerinde görünmez tıklama alanı — detay sayfasına götürür ama "Detayları Gör"
yazısı görünmez (kullanıcı isteği). */
.listing-media .l-cta{
position:absolute;inset:0;z-index:3;
display:block;
}
.listing-media .l-cta span{ display:none; }
/* Rozetler — yalnızca karakter veren durumlar için ikon */
.l-tags{
position:absolute;top:14px;left:14px;z-index:4;
display:flex;gap:6px;flex-wrap:wrap;
}
.l-tag{
display:inline-flex;align-items:center;gap:6px;
padding:7px 12px;border-radius:2px;
background:#fff;color:var(--c-primary);
font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.l-tag i{font-size:10px;color:var(--c-accent)}
.l-tag.t-rent{background:var(--c-primary);color:#fff}
.l-tag.t-rent i{color:var(--c-accent)}
.l-tag.t-deal{
background:linear-gradient(135deg,#ff6b3d,#e8472a);
color:#fff;
}
.l-tag.t-deal i{color:#fff}
.l-tag.t-new{background:#16a34a;color:#fff}
.l-tag.t-new i{color:#fff}
.l-tag.t-vip{
background:linear-gradient(135deg,var(--c-accent) 0%,#b07a2c 100%);
color:#1a1a1a;
}
.l-tag.t-vip i{color:#1a1a1a}
/* Sağ üst — favori ve paylaş (hover'da görünür) */
.l-actions{
position:absolute;top:14px;right:14px;z-index:5;
display:flex;flex-direction:column;gap:8px;
/* Mobil + masaüstü her zaman görünür — favori/paylaş tıklanabilir olsun */
opacity:.85;transform:translateX(0);
transition:opacity .25s ease, transform .25s ease;
}
.listing:hover .l-actions{opacity:1}
.l-actions button{ pointer-events:auto; }
.l-actions button{
width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.95);backdrop-filter:blur(8px);
color:var(--c-primary);font-size:13px;
display:flex;align-items:center;justify-content:center;
transition:all .25s ease;
box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.l-actions button:hover{background:var(--c-primary);color:#fff;transform:scale(1.08)}
/* Sol alt — fotoğraf sayacı (sade) */
.l-meta{
position:absolute;left:14px;bottom:14px;z-index:4;
display:flex;gap:6px;
}
.l-meta span{
display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:50px;
background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
color:var(--c-primary);font-size:11px;font-weight:700;letter-spacing:.5px;
}
.l-meta span i{font-size:10px;color:var(--c-accent)}
/* Sağ alt — referans no (hover'da kayboluyor, CTA'ya yer veriyor) */
.l-ref{
position:absolute;right:14px;bottom:14px;z-index:4;
font-size:10px;font-weight:700;letter-spacing:1.8px;
color:#fff;
background:rgba(11,37,69,.7);backdrop-filter:blur(8px);
padding:5px 11px;border-radius:50px;
transition:opacity .3s ease;
}
.listing:hover .l-ref{opacity:0}
/* Body */
.listing-body{padding:22px;display:flex;flex-direction:column;flex:1}
.listing-body .loc{
font-size:11px;color:var(--c-accent);
letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
display:block;margin-bottom:10px;
}
.listing-body h3{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:16.5px;font-weight:700;line-height:1.35;
margin-bottom:16px;letter-spacing:-.2px;
min-height:44px;
}
.listing-body h3 a{color:var(--c-primary)}
.listing-body h3 a:hover{color:var(--c-accent)}
/* Özellikler — orantılı, eşit genişlik */
.features{
display:grid;grid-template-columns:repeat(4,1fr);
padding:14px 0;
border-top:1px solid var(--c-border);
border-bottom:1px solid var(--c-border);
margin-bottom:18px;
}
.features li{
font-size:12.5px;color:var(--c-text);font-weight:600;
letter-spacing:.2px;text-align:center;
position:relative;
}
.features li+li::before{
content:"";position:absolute;left:0;top:15%;height:70%;
width:1px;background:var(--c-border);
}
.listing-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto}
.price{
color:var(--c-primary);font-family:'Playfair Display',serif;
font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1;
}
/* Anti-scrape: fiyat metni HTML'de yok, ::after içinde --px CSS değişkeniyle render edilir.
JS yüklenmeden önce fallback "•••" gösterilir — gerçek kullanıcı 100ms farketmez. */
.price[data-px]::after,
.price.price-on::after{
content: var(--px, '•••');
font: inherit; color: inherit; letter-spacing: inherit;
}
/* Para birimi/ay etiketi ana metnin parçası olarak gelir; mevcut .price span/small stilleri
bu pseudo-element içinde uygulanamaz, fakat içerik fmt_price'tan plain string olarak gelir. */
.price span,.price small{
font-family:'Plus Jakarta Sans',sans-serif;
font-weight:500;font-size:12px;color:var(--c-muted);
margin-left:3px;
}
.btn-link{
font-size:11.5px;font-weight:700;color:var(--c-primary);
letter-spacing:1.5px;text-transform:uppercase;
position:relative;padding-bottom:4px;
}
.btn-link::after{
content:"";position:absolute;left:0;bottom:0;
width:100%;height:1px;background:var(--c-accent);
transform:scaleX(.4);transform-origin:left;
transition:transform .35s ease;
}
.btn-link:hover{color:var(--c-accent)}
.btn-link:hover::after{transform:scaleX(1)}
/* İlan kartı sahip şeridi */
.l-owner{
display:flex;align-items:center;gap:10px;
margin-top:14px;padding-top:14px;
border-top:1px solid var(--c-border);
}
.l-owner-avatar{
width:32px;height:32px;border-radius:50%;
object-fit:cover;flex-shrink:0;
border:2px solid var(--c-accent);
background:var(--c-light);
display:flex;align-items:center;justify-content:center;
font-weight:700;color:var(--c-primary);font-size:13px;
}
.l-owner-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.l-owner-name{
color:var(--c-primary);font-size:13px;font-weight:700;letter-spacing:-.1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.l-owner-role{
color:var(--c-muted);font-size:10.5px;
text-transform:uppercase;letter-spacing:1.5px;font-weight:600;
margin-top:2px;
}
.see-all{text-align:center;margin-top:50px}
/* About */
.about-section{padding:100px 0;overflow:hidden}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.exp-card{
position:absolute;left:-30px;bottom:60px;
background:var(--c-primary);color:#fff;
padding:26px 32px;border-radius:2px;
box-shadow:0 30px 60px -25px rgba(0,0,0,.5);
border-left:3px solid var(--c-accent);
}
.exp-text-inner span{
display:block;font-size:11px;letter-spacing:3px;
text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;
margin-bottom:6px;
}
.exp-text-inner strong{
display:block;font-family:'Playfair Display',serif;
font-size:24px;font-weight:600;color:#fff;letter-spacing:-.3px;
}
.about-text .lead{font-size:16px;color:var(--c-muted);margin-bottom:24px}
.checks{margin-bottom:30px}
.checks li{padding:8px 0;font-weight:500}
.checks li i{color:var(--c-success);margin-right:10px;font-size:16px}
.about-cta{display:flex;gap:14px;flex-wrap:wrap}
/* Services (bireysel) */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service{
background:#fff;padding:36px 30px;border-radius:6px;
border:1px solid var(--c-border);transition:all var(--t);
position:relative;
}
.service:hover{transform:translateY(-4px);border-color:var(--c-accent);box-shadow:var(--shadow-md)}
.srv-icon{
width:52px;height:52px;border-radius:50%;
background:var(--c-primary);color:var(--c-accent);
display:flex;align-items:center;justify-content:center;
font-size:20px;margin-bottom:22px;
}
.service h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;margin-bottom:10px;color:var(--c-primary)}
.service p{color:var(--c-muted);font-size:14px;line-height:1.7;margin:0}
/* Cities */
.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.city{
position:relative;border-radius:6px;overflow:hidden;
background-size:cover;background-position:center;
min-height:340px;display:flex;align-items:flex-end;
transition:all var(--t);
}
.city-shade{
position:absolute;inset:0;
background:linear-gradient(to top,rgba(6,15,30,.85) 0%,rgba(6,15,30,.2) 60%,transparent 100%);
transition:all var(--t);
}
.city:hover{transform:translateY(-4px)}
.city:hover .city-shade{background:linear-gradient(to top,rgba(11,37,69,.9) 0%,rgba(11,37,69,.4) 60%,rgba(11,37,69,.2) 100%)}
.city-text{position:relative;z-index:2;padding:24px;color:#fff;width:100%}
.city-text h3{color:#fff;font-size:22px;margin-bottom:6px;font-weight:600}
.city-text span{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--c-accent);font-weight:600}
/* Projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.project{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--t);border:1px solid var(--c-border)}
.project:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.project-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.project-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.project:hover .project-img img{transform:scale(1.08)}
.proj-status{position:absolute;top:14px;left:14px;background:var(--c-accent);color:#fff;padding:5px 12px;border-radius:6px;font-size:11.5px;font-weight:700;text-transform:uppercase}
.project-body{padding:24px}
.project-body h3{margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}
.project-body p{color:var(--c-muted);font-size:14px;margin-bottom:14px}
.project-body p i{color:var(--c-accent);margin-right:6px}
.project-body ul{display:flex;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--c-border)}
.project-body ul li{font-size:13px;color:var(--c-text);font-weight:500}
.project-body ul li i{color:var(--c-accent);margin-right:5px}
/* CTA Banner */
.cta-banner{
background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-3) 100%);
color:#fff;padding:70px 0;position:relative;overflow:hidden;
}
.cta-banner::before{
content:"";position:absolute;right:-100px;top:50%;width:500px;height:500px;
border-radius:50%;background:radial-gradient(circle,rgba(212,162,86,.18),transparent 70%);
transform:translateY(-50%);
}
.cta-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
.cta-grid h2{color:#fff}
.cta-grid h2 .accent{color:var(--c-accent)}
.cta-grid p{color:rgba(255,255,255,.8);font-size:16px;margin:0}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
/* Agents */
.agents{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.agent{
background:#fff;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);transition:all var(--t);text-align:center;
}
.agent:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.agent img{aspect-ratio:1;object-fit:cover;width:100%}
.agent-body{padding:22px}
.agent-body h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin-bottom:4px}
.agent-body > span{color:var(--c-accent);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.agent-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px 0;margin:18px 0;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.agent-stats li{display:flex;flex-direction:column;font-size:11.5px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.5px}
.agent-stats strong{font-family:'Playfair Display',serif;font-size:22px;color:var(--c-primary);font-weight:700}
.agent-soc{display:flex;justify-content:center;gap:8px}
.agent-soc a{
width:36px;height:36px;border-radius:50%;background:var(--c-light);
color:var(--c-primary);display:inline-flex;align-items:center;justify-content:center;
font-size:13px;transition:all var(--t);
}
.agent-soc a:hover{background:var(--c-accent);color:#fff;transform:translateY(-3px)}
/* Testimonials */
.testimonials-section{
background:linear-gradient(135deg,#0b2545 0%,#13315c 100%);
color:#fff;position:relative;overflow:hidden;
}
.testimonials-section::before{
content:"";position:absolute;left:-200px;top:-200px;
width:600px;height:600px;border-radius:50%;
background:radial-gradient(circle,rgba(212,162,86,.12),transparent 70%);
}
.testimonials-section .section-head h2{color:#fff}
.testimonials-section .section-head .eyebrow{color:var(--c-accent)}
.testimonials{position:relative;max-width:780px;margin:0 auto;min-height:340px}
.testimonial{
position:absolute;inset:0;text-align:center;
opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;
pointer-events:none;visibility:hidden;
}
.testimonial.active{opacity:1;transform:translateY(0);pointer-events:all;visibility:visible}
.quote-mark{font-size:54px;color:var(--c-accent);opacity:.4;margin-bottom:20px}
.testimonial p{font-size:20px;line-height:1.6;color:#fff;font-style:italic;margin-bottom:30px}
.t-meta{display:inline-flex;align-items:center;gap:14px;text-align:left}
.t-meta img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid var(--c-accent)}
.t-meta strong{display:block;color:#fff;font-size:16px;margin-bottom:2px}
.t-meta span{color:rgba(255,255,255,.7);font-size:13px;display:block;margin-bottom:4px}
.stars{color:var(--c-accent);font-size:13px}
.t-dots{display:flex;justify-content:center;gap:10px;margin-top:30px;position:relative;z-index:2}
.t-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all var(--t)}
.t-dot.active{background:var(--c-accent);width:28px;border-radius:50px}
/* Blog */
.blog-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.blog-card{
background:#fff;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--c-border);transition:all var(--t);
display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.blog-card.big{height:100%}
.blog-card.big img{aspect-ratio:16/10;width:100%;object-fit:cover}
.blog-card.big .blog-body{padding:28px}
.blog-card.big h3 a{font-size:24px;font-family:'Playfair Display',serif}
.blog-card.big p{color:var(--c-muted);margin:14px 0}
.blog-cat{display:inline-block;background:var(--c-accent);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.blog-meta{display:flex;gap:18px;font-size:12.5px;color:var(--c-muted);margin-top:auto;padding-top:10px}
.blog-meta i{color:var(--c-accent);margin-right:5px}
.blog-side{display:flex;flex-direction:column;gap:18px}
.blog-card.small{flex-direction:row;align-items:stretch}
.blog-card.small img{width:160px;flex-shrink:0;object-fit:cover}
.blog-card.small .blog-body{padding:18px;display:flex;flex-direction:column;justify-content:center}
.blog-card.small h3 a{font-size:16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.35;color:var(--c-primary)}
.blog-card.small h3 a:hover{color:var(--c-accent)}
/* Newsletter */
.newsletter{
background:var(--c-light);padding:50px 0;
border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
}
.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.news-grid h3{font-family:'Playfair Display',serif;font-size:26px;margin-bottom:6px}
.news-grid p{color:var(--c-muted);margin:0}
.news-form{display:flex;gap:0;background:#fff;border-radius:50px;padding:6px;box-shadow:var(--shadow-sm)}
.news-form input{flex:1;border:0;outline:0;padding:0 22px;font:inherit;background:transparent}
.news-form button{
background:var(--c-accent);color:#1a1a1a;
padding:14px 26px;border-radius:50px;
font-weight:700;font-size:14px;
display:inline-flex;align-items:center;gap:8px;
transition:all var(--t);
}
.news-form button:hover{background:var(--c-primary);color:#fff}
/* Footer */
.footer{background:#06192e;color:rgba(255,255,255,.75);padding:70px 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.logo-light .logo-mark{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));color:#1a1a1a}
.logo-light .logo-mark span{color:#1a1a1a}
.logo-light .logo-text strong{color:#fff}
.logo-light .logo-text small{color:rgba(255,255,255,.6)}
.f-col p{color:rgba(255,255,255,.7);font-size:14px;margin:18px 0 22px}
.f-col h4{color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;margin-bottom:20px;position:relative;padding-bottom:10px}
.f-col h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--c-accent)}
.f-col ul li{margin-bottom:10px}
.f-col ul li a{color:rgba(255,255,255,.7);font-size:14px;transition:all var(--t)}
.f-col ul li a:hover{color:var(--c-accent);padding-left:6px}
.contact-list li{display:flex;gap:10px;font-size:13.5px;color:rgba(255,255,255,.75);align-items:flex-start}
.contact-list li i{color:var(--c-accent);margin-top:5px;width:14px;flex-shrink:0}
.footer-bottom{margin-top:50px;background:rgba(0,0,0,.25);padding:18px 0}
.fb-inner{display:flex;justify-content:space-between;align-items:center;font-size:13px;flex-wrap:wrap;gap:14px}
.fb-inner ul{display:flex;gap:22px}
.fb-inner ul li a{color:rgba(255,255,255,.65);font-size:13px}
/* ========= Mülk Bulma Wizard — sade & kurumsal ========= */
.wz-hero{
background:#fff;
border-bottom:1px solid var(--c-border);
padding:90px 0 80px;text-align:center;
}
.wz-eyebrow{
display:inline-block;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:3px;
color:var(--c-accent);
padding-bottom:14px;margin-bottom:22px;
position:relative;
}
.wz-eyebrow::after{
content:"";position:absolute;left:50%;bottom:0;
width:30px;height:1px;background:var(--c-accent);
transform:translateX(-50%);
}
.wz-hero h1{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:clamp(2rem,3.4vw,2.6rem);font-weight:700;
letter-spacing:-.8px;color:var(--c-primary);
margin:0 auto 18px;max-width:760px;line-height:1.25;
}
.wz-hero p{color:var(--c-muted);font-size:15.5px;max-width:620px;margin:0 auto;line-height:1.75}
.wizard-section{padding:70px 0 100px;background:var(--c-light)}
.wizard-shell{max-width:1080px;margin:0 auto}
/* Stepper */
.wz-stepper{
display:flex;justify-content:space-between;align-items:flex-start;
padding:0 30px;margin-bottom:36px;position:relative;
}
.wz-stepper::before{
content:"";position:absolute;
left:10%;right:10%;top:19px;height:1px;
background:var(--c-border);z-index:0;
}
.wz-step{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;gap:10px;
flex:1;
}
.wz-num{
width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid var(--c-border);
display:flex;align-items:center;justify-content:center;
font-weight:600;font-size:14px;color:var(--c-muted);
transition:all .3s ease;
}
.wz-name{
font-size:11px;letter-spacing:2px;text-transform:uppercase;
font-weight:600;color:var(--c-muted);
transition:color .25s ease;
}
.wz-step.active .wz-num{
background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}
.wz-step.active .wz-name{color:var(--c-primary)}
.wz-step.done .wz-num{
background:#fff;border-color:var(--c-primary);color:var(--c-primary);
}
.wz-step.done .wz-name{color:var(--c-primary)}
/* Wizard kart */
.wz-card{
background:#fff;border:1px solid var(--c-border);border-radius:8px;
overflow:hidden;
}
.wz-pane{display:none;padding:70px 80px 50px;animation:wzFade .4s ease}
.wz-pane.active{display:block}
@keyframes wzFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.wz-head{margin-bottom:50px;padding-bottom:30px;border-bottom:1px solid var(--c-border)}
.wz-tag{
display:inline-block;
font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-muted);font-weight:600;margin-bottom:18px;
}
.wz-tag-done{color:var(--c-accent)}
.wz-head h2{
font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
font-size:28px;color:var(--c-primary);
letter-spacing:-.6px;line-height:1.25;margin:0 0 12px;
}
.wz-head h2 strong{color:var(--c-accent);font-weight:700}
.wz-head p{color:var(--c-muted);font-size:15px;line-height:1.7;margin:0;max-width:620px}
.wz-q{margin-bottom:40px}
.wz-q:last-child{margin-bottom:0}
.wz-q > label{
display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-muted);font-weight:700;margin-bottom:18px;
}
.wz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.wz-options-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;
}
.wz-opt{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
padding:24px 22px;
font:inherit;color:var(--c-primary);
cursor:pointer;transition:all .2s ease;text-align:left;
display:flex;flex-direction:column;gap:6px;
}
.wz-opt strong{font-weight:700;font-size:15.5px;letter-spacing:-.1px}
.wz-opt span{font-size:12.5px;color:var(--c-muted);font-weight:500}
.wz-opt:hover{border-color:var(--c-primary)}
.wz-opt.active{
border-color:var(--c-primary);background:var(--c-primary);color:#fff;
}
.wz-opt.active span{color:rgba(255,255,255,.7)}
.wz-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.wz-input label{
display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-muted);font-weight:600;margin-bottom:10px;
}
.wz-input input{
width:100%;padding:16px 20px;border:1px solid var(--c-border);border-radius:6px;
font:inherit;font-size:15.5px;font-weight:600;color:var(--c-primary);
outline:0;transition:border-color .2s ease;letter-spacing:-.1px;
background:#fff;
}
.wz-input input:focus{border-color:var(--c-primary)}
.wz-budget-presets{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-top:18px;padding-top:18px;border-top:1px solid var(--c-border);
}
.wz-budget-presets > span{
font-size:11px;color:var(--c-muted);
letter-spacing:2px;text-transform:uppercase;font-weight:600;
margin-right:4px;
}
.wz-budget-presets button{
padding:9px 18px;
background:#fff;border:1px solid var(--c-border);
font:inherit;font-size:12.5px;font-weight:600;color:var(--c-primary);
cursor:pointer;transition:all .2s ease;letter-spacing:.2px;
}
.wz-budget-presets button:hover{
background:var(--c-primary);color:#fff;border-color:var(--c-primary);
}
/* Özellikler — sade liste kartları */
.wz-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.wz-feats label{
display:flex;align-items:center;justify-content:center;
padding:18px 16px;border:1px solid var(--c-border);border-radius:6px;
font-size:14px;font-weight:600;color:var(--c-text);
cursor:pointer;transition:all .2s ease;text-align:center;
background:#fff;
}
.wz-feats label input{
position:absolute;opacity:0;pointer-events:none;
}
.wz-feats label:hover{border-color:var(--c-primary)}
.wz-feats label:has(input:checked){
background:var(--c-primary);color:#fff;border-color:var(--c-primary);
}
/* Wizard navigation */
.wz-nav{
display:flex;justify-content:space-between;align-items:center;gap:22px;
padding:28px 80px;
border-top:1px solid var(--c-border);
background:var(--c-light);
}
.wz-nav .btn{padding:14px 30px;font-size:13px;letter-spacing:.6px}
.wz-nav .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.wz-progress{
flex:1;max-width:260px;height:2px;background:var(--c-border);
overflow:hidden;
}
.wz-progress span{
display:block;height:100%;
background:var(--c-primary);
width:20%;transition:width .4s ease;
}
/* Sonuç paneli içi */
.wz-head-result{text-align:center;padding-bottom:36px}
.wz-head-result h2{font-size:30px}
.wz-summary{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
margin-bottom:40px;padding-bottom:36px;
border-bottom:1px solid var(--c-border);
}
.wz-summary span{
display:inline-flex;align-items:center;gap:6px;
padding:8px 16px;
background:var(--c-light);border:1px solid var(--c-border);
font-size:12.5px;font-weight:500;color:var(--c-primary);
letter-spacing:.2px;
}
.wz-summary span b{color:var(--c-primary);font-weight:700;margin-right:2px}
.fr-empty{
display:none;text-align:center;padding:50px 24px;
background:var(--c-light);border:1px dashed var(--c-border);border-radius:6px;
color:var(--c-muted);font-size:15px;line-height:1.7;
}
.fr-empty.show{display:block}
/* Eşleşme rozeti */
.listing .l-match{
position:absolute;top:14px;right:14px;z-index:4;
background:var(--c-accent);color:#1a1a1a;
padding:5px 12px;border-radius:50px;
font-size:11px;font-weight:700;letter-spacing:.5px;
box-shadow:0 4px 14px rgba(212,162,86,.4);
}
/* ========= Mülk Bulma Aracı (eski stiller — geriye uyum için kaldı) ========= */
.finder-intro{text-align:center;max-width:760px;margin:0 auto 36px}
.finder-intro h2{
font-family:'Playfair Display',serif;
font-size:30px;font-weight:600;color:var(--c-primary);
letter-spacing:-.5px;line-height:1.2;margin:0 0 12px;
}
.finder-intro h2 span{color:var(--c-accent);font-style:italic}
.finder-intro p{color:var(--c-muted);font-size:15px;margin:0}
.finder-form{
background:#fff;border:1px solid var(--c-border);border-radius:8px;
padding:34px 38px;
box-shadow:0 8px 24px -10px rgba(11,37,69,.08);
}
.ff-section{padding:18px 0;border-bottom:1px solid var(--c-light-2)}
.ff-section:first-child{padding-top:0}
.ff-section:last-of-type{border-bottom:0}
.ff-section h3{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13px;font-weight:700;color:var(--c-primary);
margin:0 0 14px;letter-spacing:.2px;
display:flex;align-items:center;gap:10px;
}
.ff-pills{display:flex;flex-wrap:wrap;gap:8px}
.ff-pill{
padding:9px 18px;border-radius:50px;
background:#fff;border:1px solid var(--c-border);
font:inherit;font-size:13px;font-weight:600;color:var(--c-text);
cursor:pointer;transition:all .25s ease;letter-spacing:.2px;
}
.ff-pill:hover{border-color:var(--c-primary);color:var(--c-primary)}
.ff-pill.active{
background:var(--c-primary);border-color:var(--c-primary);color:#fff;
box-shadow:0 4px 12px -4px rgba(11,37,69,.4);
}
.ff-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ff-grid > div{padding:0}
.ff-grid h3{margin-top:0}
.ff-range{display:flex;align-items:center;gap:10px}
.ff-range input{
flex:1;padding:12px 14px;border:1px solid var(--c-border);border-radius:6px;
font:inherit;font-size:14px;font-weight:600;color:var(--c-primary);
outline:0;transition:border-color var(--t);
}
.ff-range input:focus{border-color:var(--c-accent)}
.ff-range span{color:var(--c-muted);font-weight:600}
.ff-checks{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ff-checks label{
display:flex;align-items:center;gap:8px;cursor:pointer;
padding:10px 14px;border:1px solid var(--c-border);border-radius:6px;
font-size:13px;font-weight:600;color:var(--c-text);
transition:all .2s ease;
}
.ff-checks label:hover{border-color:var(--c-primary);background:var(--c-light)}
.ff-checks label:has(input:checked){
background:var(--c-primary);color:#fff;border-color:var(--c-primary);
}
.ff-checks input{accent-color:var(--c-accent);width:14px;height:14px}
.ff-actions{
display:flex;gap:12px;justify-content:flex-end;
margin-top:24px;padding-top:24px;border-top:1px solid var(--c-border);
}
/* Sonuç alanı */
.finder-results{margin-top:50px;display:none}
.finder-results.show{display:block}
.fr-head{
display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:24px;padding-bottom:14px;
border-bottom:1px solid var(--c-border);flex-wrap:wrap;gap:14px;
}
.fr-head h3{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:20px;font-weight:700;color:var(--c-primary);
margin:0 0 4px;
}
.fr-head p{color:var(--c-muted);font-size:13.5px;margin:0}
.fr-head strong{color:var(--c-accent);font-weight:700}
.fr-empty{
display:none;text-align:center;padding:50px 24px;
background:#fff;border:1px dashed var(--c-border);border-radius:6px;
color:var(--c-muted);font-size:15px;line-height:1.7;
}
.fr-empty.show{display:block}
/* Eşleşme rozeti — kart üstüne */
.listing .l-match{
position:absolute;top:14px;right:14px;z-index:4;
background:var(--c-accent);color:#1a1a1a;
padding:5px 12px;border-radius:50px;
font-size:11px;font-weight:700;letter-spacing:.5px;
box-shadow:0 4px 14px rgba(212,162,86,.4);
}
/* ========= Kredi Hesaplama ========= */
.calc-grid{
display:grid;grid-template-columns:1.2fr 1fr;
gap:30px;align-items:flex-start;
}
.calc-form{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
padding:36px 38px;
}
.calc-title{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:22px;font-weight:700;color:var(--c-primary);
margin:0 0 6px;letter-spacing:-.3px;
}
.calc-sub{color:var(--c-muted);font-size:14px;margin:0 0 28px}
.cf-field{margin-bottom:20px;display:flex;flex-direction:column}
.cf-field label{
font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--c-muted);font-weight:700;margin-bottom:8px;
}
.cf-field label span{color:var(--c-accent);font-weight:600}
.cf-field input[type="text"],.cf-field input[type="number"],.cf-field select{
padding:14px 16px;border:1px solid var(--c-border);border-radius:6px;
font:inherit;font-size:16px;font-weight:700;color:var(--c-primary);
outline:0;transition:border-color var(--t);background:#fff;
letter-spacing:-.2px;
}
.cf-field input:focus,.cf-field select:focus{border-color:var(--c-accent)}
.cf-field input[type="range"]{
margin-top:10px;width:100%;
-webkit-appearance:none;appearance:none;
height:4px;border-radius:50px;background:var(--c-border);
outline:0;
}
.cf-field input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;border-radius:50%;
background:var(--c-accent);cursor:pointer;
border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.cf-field input[type="range"]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;
background:var(--c-accent);cursor:pointer;
border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-btn{width:100%;justify-content:center;font-size:14px;letter-spacing:.5px;padding:15px}
.calc-note{
font-size:12.5px;color:var(--c-muted);
margin:18px 0 0;line-height:1.6;font-style:italic;
}
/* Sağ sonuç paneli */
.calc-result{
position:sticky;top:90px;
display:flex;flex-direction:column;gap:18px;
}
.cr-card{
background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-2) 100%);
color:#fff;
border-radius:6px;
padding:30px 28px;
text-align:center;
position:relative;overflow:hidden;
}
.cr-card::before{
content:"";position:absolute;left:0;top:0;
width:60px;height:3px;background:var(--c-accent);
}
.cr-card::after{
content:"";position:absolute;right:-80px;bottom:-80px;
width:240px;height:240px;border-radius:50%;
background:radial-gradient(circle,rgba(212,162,86,.15),transparent 70%);
}
.cr-label{
display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-accent);font-weight:700;margin-bottom:14px;
position:relative;z-index:2;
}
.cr-value{
display:block;font-family:'Plus Jakarta Sans',sans-serif;
font-size:42px;font-weight:800;color:#fff;
line-height:1;letter-spacing:-1.5px;
position:relative;z-index:2;
}
.cr-unit{
display:block;margin-top:6px;
color:rgba(255,255,255,.6);font-size:12.5px;letter-spacing:.5px;
position:relative;z-index:2;
}
.cr-list{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
padding:8px 24px;
}
.cr-list li{
display:flex;justify-content:space-between;align-items:center;
padding:14px 0;border-bottom:1px dashed var(--c-border);
font-size:13.5px;
}
.cr-list li:last-child{border-bottom:0}
.cr-list li span{color:var(--c-muted);font-weight:500}
.cr-list li strong{color:var(--c-primary);font-weight:700}
.calc-cta{justify-content:center;width:100%}
/* SSS */
.calc-faq{margin-top:50px;max-width:780px;margin-left:auto;margin-right:auto}
.calc-faq h3{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:20px;font-weight:700;color:var(--c-primary);
margin:0 0 18px;text-align:center;
}
.calc-faq details{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
padding:0;margin-bottom:10px;overflow:hidden;
}
.calc-faq details[open]{border-color:var(--c-accent)}
.calc-faq summary{
padding:18px 22px;cursor:pointer;
font-weight:700;color:var(--c-primary);font-size:14.5px;
list-style:none;position:relative;padding-right:48px;
transition:background var(--t);
}
.calc-faq summary::-webkit-details-marker{display:none}
.calc-faq summary::after{
content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
font-size:22px;color:var(--c-accent);font-weight:300;line-height:1;
transition:transform .25s ease;
}
.calc-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.calc-faq summary:hover{background:var(--c-light)}
.calc-faq details p{
margin:0;padding:0 22px 22px;
color:var(--c-muted);font-size:14px;line-height:1.7;
}
/* Mobil sticky bottom navigation (sadece detay sayfasında, mobilde) */
.mobile-nav{
display:none;
position:fixed;left:0;right:0;bottom:0;z-index:80;
background:#fff;
border-top:1px solid var(--c-border);
box-shadow:0 -8px 24px rgba(0,0,0,.08);
padding:0;
}
.mobile-nav .mn-item{
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:10px 6px 8px;gap:5px;
color:var(--c-muted);
font-size:10.5px;letter-spacing:.3px;font-weight:600;
position:relative;
transition:color var(--t);
}
.mobile-nav .mn-item i{
font-size:18px;color:var(--c-primary);
transition:transform .25s ease,color .25s ease;
}
.mobile-nav .mn-item:hover{color:var(--c-primary)}
.mobile-nav .mn-item:active i{transform:scale(.9)}
.mobile-nav .mn-item:not(:last-child)::after{
content:"";position:absolute;right:0;top:25%;height:50%;width:1px;
background:var(--c-border);
}
/* Vurgulu Ara butonu */
.mobile-nav .mn-item:first-child i{color:var(--c-success)}
.mobile-nav .mn-item:nth-child(2) i{color:#25d366}
/* Floating WhatsApp */
.whatsapp-fab{
position:fixed;right:24px;bottom:24px;
width:56px;height:56px;border-radius:50%;
background:#25d366;color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:28px;z-index:50;
box-shadow:0 8px 28px rgba(37,211,102,.5);
animation:wpPulse 2s infinite;
}
.whatsapp-fab:hover{color:#fff;transform:scale(1.08)}
@keyframes wpPulse{
0%,100%{box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 0 0 rgba(37,211,102,.5)}
50%{box-shadow:0 8px 28px rgba(37,211,102,.5),0 0 0 18px rgba(37,211,102,0)}
}
/* Back to top */
.to-top{
position:fixed;left:24px;bottom:24px;
width:46px;height:46px;border-radius:50%;
background:var(--c-primary);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:14px;z-index:50;
box-shadow:var(--shadow-md);
opacity:0;visibility:hidden;transform:translateY(10px);
transition:all var(--t);
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--c-accent);color:#1a1a1a}
/* Filtre drawer açıkken to-top da gizli — buton önünü kapatmasın */
body.filter-open .to-top{display:none !important}
/* ========= Page Header (other pages) ========= */
.page-hero{
background:#fafaf7;
border-bottom:1px solid var(--c-border);
color:var(--c-primary);padding:90px 0 70px;text-align:center;
}
.page-hero h1{
color:var(--c-primary);margin-bottom:14px;font-weight:500;
font-family:'Playfair Display',serif;letter-spacing:-1px;
}
.breadcrumbs{
color:var(--c-muted);font-size:13px;
display:inline-flex;align-items:center;gap:10px;
letter-spacing:.5px;
}
.breadcrumbs a{color:var(--c-primary);font-weight:600}
.breadcrumbs a:hover{color:var(--c-accent)}
.breadcrumbs span{color:var(--c-muted)}
/* ========= Listings page ========= */
.listings-page{padding:60px 0}
.lp-grid{display:grid;grid-template-columns:340px 1fr;gap:30px;align-items:flex-start}
@media (max-width:1100px){ .lp-grid{grid-template-columns:300px 1fr;gap:24px} }
.sidebar{
background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);
padding:24px;position:sticky;top:90px;
}
.sb-head{display:none;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.sb-head h4{margin:0}
.sb-close{font-size:30px;color:var(--c-muted);line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--t)}
.sb-close:hover{background:var(--c-light);color:var(--c-primary)}
.filter-backdrop{
display:none;position:fixed;inset:0;z-index:90;
background:rgba(11,37,69,.55);backdrop-filter:blur(2px);
border:0;cursor:pointer;
}
.filter-backdrop.show{display:block}
.filter-btn{
display:none;align-items:center;gap:8px;
padding:10px 16px;border-radius:8px;
background:var(--c-primary);color:#fff;
font:inherit;font-size:13px;font-weight:700;letter-spacing:.3px;
cursor:pointer;
transition:all var(--t);
position:relative;z-index:1;
-webkit-tap-highlight-color:rgba(212,162,86,.3);
touch-action:manipulation;
}
/* === Mobil sabit filtre FAB butonu — sağ altta yuvarlak === */
.mobile-filter-fab{
display:none; /* masaüstünde gizli */
position:fixed;
right:18px;
bottom:80px; /* alttaki mobile-nav'in üstünde */
z-index:99999; /* hiçbir şey üstüne binemez */
width:auto;min-width:64px;height:54px;
padding:0 22px;
border-radius:50px;
background:var(--c-primary);
color:#fff;
font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.4px;
display:none; /* media-query'de aç */
align-items:center;justify-content:center;gap:8px;
border:0;cursor:pointer;
box-shadow:0 8px 24px -4px rgba(11,37,69,.5),
0 0 0 4px rgba(255,255,255,.6);
-webkit-tap-highlight-color:rgba(212,162,86,.4);
touch-action:manipulation;
}
.mobile-filter-fab i{font-size:16px;color:var(--c-accent)}
.mobile-filter-fab:active{transform:scale(.95)}
/* Drawer açıkken FAB'ı gizle */
body.filter-open .mobile-filter-fab{display:none !important}
/* ═══════════════════════════════════════════════════════════════════════
Drawer açıkken arka plan scroll'unu CSS ile kilitle.
body{position:fixed} KULLANMA — iOS Safari'de drawer içindeki
butonların touch koordinatlarını kırıyor. Bunun yerine html'de
overflow:hidden (JS'le set ediliyor) + aşağıdaki yedek kurallar.
═══════════════════════════════════════════════════════════════════════ */
html:has(body.filter-open) { overflow: hidden; }
body.filter-open { overscroll-behavior: contain; }
.filter-btn:hover{background:var(--c-accent);color:#1a1a1a}
.filter-btn:active{transform:scale(.97)}
.filter-btn i{font-size:13px}
.sidebar h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;margin:0 0 14px;color:var(--c-primary)}
.sidebar .filter-group{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--c-border)}
.sidebar .filter-group:last-child{border:0;padding:0;margin:0}
.sidebar select,.sidebar input[type="text"],.sidebar input[type="number"]{
width:100%;padding:11px 14px;border:1px solid var(--c-border);border-radius:8px;
font:inherit;font-size:14px;outline:0;background:#fff;
transition:border var(--t);
}
.sidebar select:focus,.sidebar input:focus{border-color:var(--c-accent)}
.sidebar .check{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;cursor:pointer}
.sidebar .check input{accent-color:var(--c-accent)}
.range-row{display:flex;gap:8px}
.btn-block{width:100%;justify-content:center;margin-top:8px}
.list-toolbar{
display:flex;justify-content:space-between;align-items:center;
background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);
padding:14px 20px;margin-bottom:24px;flex-wrap:wrap;gap:14px;
}
.list-toolbar .filter-btn{margin-right:auto}
.list-count{font-size:14px;color:var(--c-muted)}
.list-count strong{color:var(--c-primary)}
.list-tools{display:flex;align-items:center;gap:12px}
.view-toggle{display:flex;border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.view-toggle button{padding:8px 12px;background:#fff;color:var(--c-muted);transition:all var(--t)}
.view-toggle button.active{background:var(--c-primary);color:#fff}
.list-tools select{padding:9px 32px 9px 14px;border:1px solid var(--c-border);border-radius:8px;font:inherit;font-size:13.5px;background:#fff;outline:0}
.lp-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{
width:42px;height:42px;border-radius:10px;
display:inline-flex;align-items:center;justify-content:center;
background:#fff;border:1px solid var(--c-border);
font-weight:600;font-size:14px;color:var(--c-text);transition:all var(--t);
text-decoration:none;
}
.pagination a:hover{border-color:var(--c-accent);color:var(--c-accent);transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(0,0,0,.1)}
.pagination .active{background:var(--c-primary);color:#fff;border-color:var(--c-primary);box-shadow:0 6px 16px -4px rgba(11,37,69,.35)}
.pagination .pg-edge i{font-size:11px;color:var(--c-muted)}
.pagination .pg-edge:hover i{color:var(--c-accent)}
.pagination .pg-gap{
border:0;background:transparent;
color:var(--c-muted);font-size:18px;
width:auto;padding:0 4px;letter-spacing:2px;
cursor:default;
}
.pagination-meta{
text-align:center;margin:14px 0 0;
font-size:13px;color:var(--c-muted);
}
.pagination-meta strong{color:var(--c-primary);font-weight:700}
@media (max-width:600px){
.pagination a,.pagination span{width:36px;height:36px;font-size:13px}
}
/* ===========================================================
Detail page — sahibinden tarzı yeni yapı
=========================================================== */
.detail-section{padding:40px 0 70px}
.dt-title{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:24px;font-weight:700;color:var(--c-primary);
margin:0 0 22px;letter-spacing:-.3px;line-height:1.3;
padding-bottom:16px;border-bottom:1px solid var(--c-border);
}
.dt-grid{
display:grid;grid-template-columns:1fr 360px;
gap:28px;align-items:flex-start;
margin-bottom:24px;
}
/* ---- Sol: Galeri + bloklar ---- */
.dt-left{
min-width:0;
display:flex;flex-direction:column;gap:18px;
}
.dt-gallery{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
overflow:hidden;
}
.dg-main{
aspect-ratio:4/3;background:#eee;
background-size:cover;background-position:center;
position:relative;cursor:pointer;
transition:opacity .3s ease;
}
.dg-photos{
position:absolute;left:14px;top:14px;
background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
color:#fff;padding:6px 14px;border-radius:50px;
font-size:11.5px;font-weight:600;letter-spacing:.5px;
}
.dg-tabs{
display:flex;border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);
background:var(--c-light);
}
.dg-tabs button{
flex:1;padding:12px 14px;
font:inherit;font-size:13px;font-weight:600;color:var(--c-muted);
border-right:1px solid var(--c-border);
transition:all var(--t);
}
.dg-tabs button:last-child{border-right:0}
.dg-tabs button:hover{color:var(--c-primary)}
.dg-tabs button.active{
background:#fff;color:var(--c-primary);
border-top:2px solid var(--c-accent);margin-top:-1px;
}
.dg-thumbs{
display:flex;gap:6px;
padding:12px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* IE/Edge */
}
.dg-thumbs::-webkit-scrollbar{display:none} /* Chrome/Safari */
.dgt{
flex:0 0 calc((100% - 7 * 6px) / 8); /* tam 8 thumb genişliği */
aspect-ratio:1;
background-size:cover;background-position:center;
cursor:pointer;border-radius:3px;
border:2px solid transparent;
transition:all .2s ease;
opacity:.85;
}
.dgt:hover{opacity:1}
.dgt.active{border-color:var(--c-accent);opacity:1}
@media (max-width:900px){ .dgt{flex-basis:calc((100% - 5 * 6px) / 6)} }
@media (max-width:600px){ .dgt{flex-basis:calc((100% - 3 * 6px) / 4)} }
.dg-foot{
display:flex;justify-content:space-between;align-items:center;
padding:12px 16px;border-top:1px solid var(--c-border);
font-size:12.5px;color:var(--c-muted);font-weight:600;
}
.dg-nav{display:flex;gap:6px}
.dg-nav button{
width:32px;height:32px;border-radius:4px;
background:var(--c-light);color:var(--c-primary);
display:flex;align-items:center;justify-content:center;font-size:12px;
transition:all var(--t);
}
.dg-nav button:hover{background:var(--c-primary);color:#fff}
/* ---- Sağ: Spec sidebar ---- */
.dt-right{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
overflow:hidden;position:sticky;top:90px;
}
/* Fiyat bloğu — kurumsal lüks his */
.dt-price{
position:relative;
padding:24px 22px 22px;
background:linear-gradient(180deg,#fafaf7 0%,#fff 100%);
border-bottom:1px solid var(--c-border);
}
.dt-price::before{
content:"";position:absolute;left:0;top:0;
width:48px;height:3px;background:var(--c-accent);
}
.dp-tag{
display:block;
font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;
color:var(--c-accent);font-weight:700;
margin-bottom:10px;
}
.dp-amount{
display:flex;align-items:baseline;gap:6px;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:30px;font-weight:800;color:var(--c-primary);
letter-spacing:-.8px;line-height:1;
margin-bottom:18px;
}
.dp-amount em{
font-style:normal;font-size:20px;color:var(--c-accent);
font-weight:700;
}
.dp-meta{
display:grid;grid-template-columns:1fr 1fr;gap:0;
padding-top:14px;border-top:1px dashed var(--c-border);
}
.dp-meta span{
display:flex;flex-direction:column;
padding-right:12px;
}
.dp-meta span+span{
border-left:1px solid var(--c-border);
padding-left:14px;padding-right:0;
}
.dp-meta small{
font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
color:var(--c-muted);font-weight:600;margin-bottom:5px;
}
.dp-meta b{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:14px;color:var(--c-primary);font-weight:700;letter-spacing:-.2px;
}
.dt-bread{
padding:14px 22px;
border-bottom:1px solid var(--c-border);
font-size:12.5px;color:var(--c-muted);
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
background:#fff;
}
.dt-bread a{color:var(--c-primary);font-weight:600}
.dt-bread a:hover{color:var(--c-accent)}
.dt-bread i{font-style:normal;color:var(--c-accent);font-size:14px;line-height:1}
.dt-spec{
width:100%;border-collapse:collapse;
font-size:13px;
}
.dt-spec th,.dt-spec td{
padding:11px 22px;text-align:left;
border-bottom:1px solid var(--c-light-2);
vertical-align:middle;
}
.dt-spec th{
color:var(--c-muted);font-weight:500;
width:48%;
}
.dt-spec td{
color:var(--c-primary);font-weight:600;
text-align:right;
}
.dt-spec tr:last-child th,.dt-spec tr:last-child td{border-bottom:0}
.dt-spec tr:hover{background:#fafaf7}
.dt-spec .td-accent{color:#dc2626;font-weight:700}
.dt-report{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:14px;border-top:1px solid var(--c-border);
font-size:12.5px;color:var(--c-muted);font-weight:600;
}
.dt-report:hover{color:var(--c-primary);background:var(--c-light)}
.dt-report i{color:var(--c-muted)}
/* ---- Sol kolondaki bloklar (açıklama, özellikler, konum, iletişim) ---- */
.dt-block{
background:#fff;border:1px solid var(--c-border);border-radius:6px;
padding:26px 28px;margin:0;
}
.dt-block h2{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:17px;font-weight:700;color:var(--c-primary);
margin:0 0 16px;padding-bottom:12px;
border-bottom:1px solid var(--c-border);
}
.dt-block p{
color:var(--c-text);font-size:14.5px;line-height:1.8;
}
.dt-block p+p{margin-top:12px}
.dt-block .map-frame{height:340px;border-radius:4px;overflow:hidden;border:1px solid var(--c-border)}
.dt-block .map-frame iframe{width:100%;height:100%;border:0}
/* Leaflet harita — sade damla pin */
.dt-leaflet-map{position:relative}
.dt-leaflet-map .leaflet-control-attribution{font-size:10px}
.dt-pin{
width:30px;height:42px;
display:block;
filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.leaflet-popup-content-wrapper{border-radius:6px}
.leaflet-popup-content{font-size:13px;line-height:1.5;margin:10px 14px;min-width:200px}
.leaflet-popup-content strong{color:var(--c-primary);font-size:14px}
.leaflet-popup-content small{display:block;color:var(--c-muted);font-size:11.5px;letter-spacing:.5px;margin-top:2px}
.leaflet-popup-content .dt-pop-dirs{
display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;
}
.leaflet-popup-content .dt-pop-dirs a{
display:inline-flex;align-items:center;gap:5px;
padding:6px 10px;border-radius:50px;
background:var(--c-primary);color:#fff;
font-size:11px;font-weight:600;letter-spacing:.3px;
text-decoration:none;transition:background .2s;
}
.leaflet-popup-content .dt-pop-dirs a:hover{background:var(--c-accent);color:#1a1a1a}
.leaflet-popup-content .dt-pop-dirs a i{font-size:10px}
/* Yol tarifi butonları — harita altında */
.dt-dirs{
display:flex;gap:8px;flex-wrap:wrap;
margin-top:12px;
}
.dt-dirs a{
display:inline-flex;align-items:center;gap:7px;
padding:9px 14px;border-radius:50px;
background:#fff;border:1px solid var(--c-border);
color:var(--c-primary);font-size:12.5px;font-weight:600;letter-spacing:.3px;
text-decoration:none;transition:all .2s;
}
.dt-dirs a:hover{
background:var(--c-primary);color:#fff;border-color:var(--c-primary);
transform:translateY(-1px);
}
.dt-dirs a i{font-size:13px;color:var(--c-accent)}
.dt-dirs a:hover i{color:#fff}
.dt-dirs .dt-dirs-label{
font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--c-muted);font-weight:600;
display:flex;align-items:center;margin-right:4px;
}
/* CKEditor / zengin metin açıklaması — paragraf araları, başlıklar, listeler */
.dt-block .dt-desc{color:var(--c-text);font-size:14.5px;line-height:1.85}
.dt-block .dt-desc > *:first-child{margin-top:0 !important}
.dt-block .dt-desc > *:last-child{margin-bottom:0 !important}
.dt-block .dt-desc p{
margin:0 0 16px !important;
line-height:1.85;
padding:0;
}
.dt-block .dt-desc p:empty{display:none}
.dt-block .dt-desc br{display:block;margin:0;line-height:1.85}
.dt-block .dt-desc h2,
.dt-block .dt-desc h3,
.dt-block .dt-desc h4,
.dt-block .dt-desc h5,
.dt-block .dt-desc h6{
font-family:'Plus Jakarta Sans',sans-serif;
color:var(--c-primary);font-weight:700;
margin:22px 0 10px !important;line-height:1.3;
padding:0;border:0;
}
.dt-block .dt-desc h2{font-size:18px}
.dt-block .dt-desc h3{font-size:16px}
.dt-block .dt-desc h4,
.dt-block .dt-desc h5,
.dt-block .dt-desc h6{font-size:15px}
.dt-block .dt-desc strong,
.dt-block .dt-desc b{font-weight:700;color:var(--c-primary)}
.dt-block .dt-desc em,
.dt-block .dt-desc i{font-style:italic}
.dt-block .dt-desc ul,
.dt-block .dt-desc ol{margin:0 0 16px !important;padding-left:22px}
.dt-block .dt-desc ul li,
.dt-block .dt-desc ol li{margin:6px 0;line-height:1.7}
.dt-block .dt-desc ul{list-style:disc}
.dt-block .dt-desc ol{list-style:decimal}
.dt-block .dt-desc a{color:var(--c-accent);text-decoration:underline;font-weight:600}
.dt-block .dt-desc a:hover{color:var(--c-primary)}
.dt-block .dt-desc blockquote{
margin:16px 0;padding:10px 16px;
border-left:3px solid var(--c-accent);
background:var(--c-light);
font-style:italic;color:var(--c-muted);
}
.dt-block .dt-desc hr{margin:18px 0;border:0;border-top:1px solid var(--c-border)}
.dt-block .dt-desc img{max-width:100%;height:auto;border-radius:4px;margin:10px 0;display:block}
/* div sarmalı içerik gelirse paragraflar gibi davransın */
.dt-block .dt-desc > div{margin:0 0 16px}
.dt-contact-block{background:#fafaf7;border-color:var(--c-accent)}
.dt-contact-block h2{border-bottom-color:rgba(212,162,86,.3)}
.dt-call{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.dt-call .btn{flex:1;min-width:200px;justify-content:center}
.dt-form{display:flex;flex-direction:column;gap:10px}
.dt-form .dt-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dt-form input,.dt-form textarea{
padding:12px 14px;border:1px solid var(--c-border);border-radius:6px;
font:inherit;font-size:13.5px;outline:0;width:100%;background:#fff;
transition:border-color var(--t);
}
.dt-form input:focus,.dt-form textarea:focus{border-color:var(--c-accent)}
.dt-form textarea{min-height:100px;resize:vertical}
.dt-form button{justify-content:center;margin-top:4px}
.detail-bc{margin-bottom:24px;color:var(--c-muted)}
.detail-bc a{color:var(--c-primary)}
.loc-tag{display:inline-block;color:var(--c-accent);font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.fr-icon{
width:46px;height:46px;border-radius:50%;background:#fff;
display:flex;align-items:center;justify-content:center;
color:var(--c-accent);font-size:16px;flex-shrink:0;
}
/* Benzer İlanlar — kompakt kart düzeni */
.similar-block{margin-top:36px}
.similar-head{
display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:22px;padding-bottom:14px;
border-bottom:1px solid var(--c-border);
}
.similar-title{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:20px;font-weight:700;color:var(--c-primary);
margin:0;letter-spacing:-.3px;
}
.similar-all{
font-size:12px;font-weight:700;color:var(--c-primary);
letter-spacing:1.2px;text-transform:uppercase;
transition:color var(--t);
}
.similar-all:hover{color:var(--c-accent)}
.similar-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.sim-card{
display:flex;flex-direction:column;
background:#fff;border:1px solid var(--c-border);border-radius:6px;
overflow:hidden;color:inherit;
transition:all .35s cubic-bezier(.2,.7,.2,1);
}
.sim-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 30px -15px rgba(11,37,69,.25);
border-color:transparent;
color:inherit;
}
.sim-img{
aspect-ratio:4/3;
background-size:cover;background-position:center;
position:relative;overflow:hidden;
}
.sim-tag{
position:absolute;top:10px;left:10px;
background:#fff;color:var(--c-primary);
padding:4px 10px;border-radius:2px;
font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.sim-tag.sim-rent{background:var(--c-primary);color:#fff}
.sim-body{padding:14px 14px 16px;display:flex;flex-direction:column;flex:1}
.sim-loc{
display:block;font-size:10px;color:var(--c-accent);
letter-spacing:1.8px;text-transform:uppercase;font-weight:700;
margin-bottom:6px;
}
.sim-body h4{
font-family:'Plus Jakarta Sans',sans-serif;
font-size:13.5px;font-weight:700;color:var(--c-primary);
line-height:1.35;margin:0 0 10px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;min-height:36px;
}
.sim-card:hover h4{color:var(--c-accent)}
.sim-feat{
display:flex;flex-wrap:wrap;gap:6px 8px;
font-size:11px;color:var(--c-muted);font-weight:600;
padding-bottom:10px;border-bottom:1px solid var(--c-light-2);
margin-bottom:10px;
}
.sim-feat li:not(:last-child)::after{
content:"·";margin-left:8px;color:var(--c-border);
}
.sim-price{
margin-top:auto;
font-family:'Plus Jakarta Sans',sans-serif;
font-size:16px;font-weight:800;color:var(--c-primary);
letter-spacing:-.3px;
}
.sim-price span{
font-size:11.5px;font-weight:500;color:var(--c-muted);margin-left:2px;
}
.btn-block{width:100%;justify-content:center}
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:flex-start}
.gallery{
display:grid;
grid-template-columns:2fr 1fr 1fr;
grid-template-rows:1fr 1fr;
gap:10px;
border-radius:6px;overflow:hidden;
height:540px;
}
.gallery .g-main{
grid-column:1;grid-row:1 / span 2;
background:#eee;background-size:cover;background-position:center;
position:relative;cursor:pointer;
transition:transform .6s ease;
}
.gallery .g-main::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35) 100%);
pointer-events:none;
}
.gallery .g-mini{
background:#eee;background-size:cover;background-position:center;
cursor:pointer;transition:all .35s ease;position:relative;
overflow:hidden;
}
.gallery .g-mini::before{
content:"";position:absolute;inset:0;
background:rgba(11,37,69,0);transition:background .3s ease;
}
.gallery .g-mini:hover::before{background:rgba(11,37,69,.25)}
.gallery .all-photos{
position:absolute;right:16px;bottom:16px;z-index:2;
background:rgba(255,255,255,.95);backdrop-filter:blur(6px);
color:var(--c-primary);
padding:10px 18px;border-radius:50px;
font-size:12.5px;font-weight:700;letter-spacing:.5px;
display:inline-flex;align-items:center;gap:8px;
box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.gallery .all-photos i{color:var(--c-accent)}
.detail-head{
display:flex;justify-content:space-between;align-items:flex-start;
gap:24px;flex-wrap:wrap;margin:34px 0 30px;
padding-bottom:32px;border-bottom:1px solid var(--c-border);
}
.detail-head h1{font-size:32px;color:var(--c-primary);font-family:'Playfair Display',serif;font-weight:600;letter-spacing:-.3px;line-height:1.2}
.dh-right{text-align:right}
.dh-price{color:var(--c-primary);font-family:'Playfair Display',serif;font-size:32px;font-weight:700;letter-spacing:-.5px}
.dh-price span{font-size:18px;color:var(--c-muted);margin-left:4px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500}
.dh-tags{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}
.dh-tags .badge{background:var(--c-primary);color:#fff;padding:5px 12px;border-radius:50px;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;position:static}
/* Magazin satırı — başlığın altında inline özellikler */
.head-line{
margin:14px 0 0;padding:0;
display:flex;flex-wrap:wrap;align-items:center;
gap:14px;
font-size:14px;color:var(--c-muted);
letter-spacing:.2px;
}
.head-line span{display:inline-flex;align-items:baseline;gap:5px}
.head-line b{
color:var(--c-primary);font-weight:700;font-size:16px;
letter-spacing:-.2px;
}
.head-line em{
font-style:normal;color:var(--c-accent);font-size:13px;
opacity:.7;
}
.tabs-block{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;margin-bottom:30px}
.tabs-nav{display:flex;border-bottom:1px solid var(--c-border);overflow-x:auto}
.tabs-nav button{
padding:16px 24px;font-weight:600;font-size:14px;color:var(--c-muted);
border-bottom:3px solid transparent;white-space:nowrap;
transition:all var(--t);
}
.tabs-nav button.active{color:var(--c-primary);border-color:var(--c-accent)}
.tabs-content{padding:28px}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tab-pane h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:700;margin-bottom:14px}
.tab-pane p{color:var(--c-muted);line-height:1.8}
/* Spec table — PC: kurumsal 2 sütun zebra */
.spec-list{
display:grid;grid-template-columns:repeat(2,1fr);
gap:0 24px;
border-top:1px solid var(--c-border);
}
.spec-list li{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;
font-size:13.5px;
border-bottom:1px solid var(--c-border);
position:relative;
transition:background .25s ease;
}
.spec-list li:hover{background:var(--c-light)}
/* Zebra — soldaki kolonun çift satırları + sağdakinin tek satırları */
.spec-list li:nth-child(4n+1),
.spec-list li:nth-child(4n+4){background:#fafaf7}
.spec-list li:nth-child(4n+1):hover,
.spec-list li:nth-child(4n+4):hover{background:var(--c-light)}
.spec-list li span{
color:var(--c-muted);font-size:11.5px;
text-transform:uppercase;letter-spacing:1.2px;font-weight:600;
}
.spec-list li strong{
color:var(--c-primary);font-weight:700;font-size:14px;
letter-spacing:-.1px;
text-align:right;
}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud span{padding:6px 14px;background:var(--c-light);border-radius:50px;font-size:13px;color:var(--c-text);border:1px solid var(--c-border)}
.tag-cloud span i{color:var(--c-success);margin-right:6px}
.map-frame{height:340px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-border)}
.map-frame iframe{width:100%;height:100%;border:0}
/* Sidebar (detail) */
.detail-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:90px}
.side-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:22px}
.side-agent{text-align:center}
.side-agent img{width:90px;height:90px;border-radius:50%;object-fit:cover;margin:0 auto 12px;border:3px solid var(--c-accent)}
.side-agent h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;color:var(--c-primary);margin:0 0 4px}
.side-agent .role{color:var(--c-accent);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.side-agent .stars{color:var(--c-accent);margin-top:4px;font-size:13px}
.contact-form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.contact-form input,.contact-form textarea{
padding:11px 14px;border:1px solid var(--c-border);border-radius:8px;
font:inherit;font-size:13.5px;outline:0;width:100%;resize:vertical;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--c-accent)}
.contact-form textarea{min-height:90px}
.btn-call{background:var(--c-success);color:#fff}
.btn-call:hover{background:#138a3f;color:#fff}
.btn-wp{background:#25d366;color:#fff;display:inline-flex;align-items:center;gap:8px}
.btn-wp:hover{background:#1aaf52;color:#fff;transform:translateY(-2px)}
/* ====== Contact / About text ====== */
.simple-section{padding:80px 0}
.simple-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
/* Hakkımda — sahip portre alanı */
.ab-photo{
position:relative;
width:100%;
aspect-ratio:4/5;
max-width:420px;
border-radius:8px;
overflow:hidden;
box-shadow:var(--shadow-md);
background:var(--c-light);
}
.ab-photo img{
display:block;
width:100%;height:100%;
object-fit:cover;object-position:center top;
}
.ab-photo-fallback{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
color:var(--c-muted);
font-family:'Playfair Display',serif;
font-size:96px;font-weight:700;
}
@media (max-width:1100px){
.ab-photo{max-width:360px;margin:0 auto}
}
@media (max-width:680px){
.ab-photo{max-width:280px}
.ab-photo-fallback{font-size:72px}
}
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:flex-start}
.contact-info-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:30px}
.contact-info-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin-bottom:16px}
.ci-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--c-border)}
.ci-list li:last-child{border:0}
.ci-list li i{
width:40px;height:40px;border-radius:10px;background:var(--c-light);
display:flex;align-items:center;justify-content:center;color:var(--c-accent);flex-shrink:0;
}
.ci-list li strong{display:block;color:var(--c-primary);font-weight:700;font-size:14px;margin-bottom:2px}
.ci-list li span{color:var(--c-muted);font-size:14px}
.contact-form-big{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form-big h3{grid-column:span 2;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;margin-bottom:6px}
.contact-form-big input,.contact-form-big textarea{padding:12px 16px;border:1px solid var(--c-border);border-radius:8px;font:inherit;outline:0;width:100%;font-size:14px}
.contact-form-big textarea{grid-column:span 2;min-height:120px;resize:vertical}
.contact-form-big button{grid-column:span 2;justify-self:start}
.contact-form-big .cap-row,
.contact-form-big .kvkk-row{grid-column:span 2}
.full-map{height:380px;border-radius:var(--radius);overflow:hidden;margin-top:24px}
.full-map iframe{width:100%;height:100%;border:0}
/* Steps (Hakkımda) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{
background:#fff;padding:34px 30px;border-radius:6px;
border:1px solid var(--c-border);position:relative;
transition:all var(--t);
}
.step:hover{transform:translateY(-3px);border-color:var(--c-accent);box-shadow:var(--shadow-md)}
.step-num{
font-family:'Playfair Display',serif;font-size:18px;font-weight:600;
color:var(--c-accent);letter-spacing:1px;
display:block;margin-bottom:18px;padding-bottom:14px;
border-bottom:1px solid var(--c-border);
}
.step h3{
font-family:'Plus Jakarta Sans',sans-serif;font-size:17px;font-weight:700;
margin-bottom:10px;color:var(--c-primary);letter-spacing:-.2px;
}
.step p{color:var(--c-muted);font-size:14px;line-height:1.7;margin:0}
/* Stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:50px 0;background:var(--c-light);border-radius:var(--radius);margin:50px 0}
.stats-strip .stat{text-align:center}
.stats-strip .stat strong{display:block;font-family:'Playfair Display',serif;font-size:42px;color:var(--c-primary);font-weight:700;line-height:1}
.stats-strip .stat span{color:var(--c-muted);font-size:13.5px;text-transform:uppercase;letter-spacing:1px;margin-top:6px;display:block}
/* ===========================================================
Responsive
=========================================================== */
@media (max-width:1100px){
/* ═══════════════════════════════════════════════════════════════════════
MOBİL MENÜ DRAWER — sağdan kayan tam yükseklik, profesyonel görünüm
═══════════════════════════════════════════════════════════════════════ */
.nav{
display:flex !important;
flex-direction:column;
position:fixed;
top:0;right:0;bottom:0;
width:88vw;max-width:340px;
background:#fff;
z-index:9998;
transform:translateX(100%);
-webkit-transform:translateX(100%);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
box-shadow:-12px 0 40px rgba(11,37,69,.18);
padding:0;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.header.open .nav{
transform:translateX(0);
-webkit-transform:translateX(0);
}
/* Drawer üst başlık — logo + kapat butonu */
.nav-mobile-head{
display:flex !important;
align-items:center;justify-content:space-between;
padding:16px 20px;
border-bottom:1px solid var(--c-border);
background:#fff;
position:sticky;top:0;z-index:2;
}
.nav-mobile-logo{display:inline-flex;align-items:center}
.nav-mobile-logo img,.nav-mobile-logo svg{max-height:38px;width:auto;display:block}
.nav-close{
display:flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;
background:var(--c-light);color:var(--c-primary);
border:0;cursor:pointer;
font-size:18px;
transition:background .2s ease,color .2s ease,transform .15s ease;
-webkit-tap-highlight-color:rgba(0,0,0,.08);
touch-action:manipulation;
}
.nav-close:hover{background:var(--c-accent);color:#1a1a1a}
.nav-close:active{transform:scale(.92)}
/* Menü linkleri */
.nav-links{
display:flex;flex-direction:column;
padding:8px 12px;
flex:1 1 auto;
}
.nav-links a{
display:flex;align-items:center;
padding:14px 16px;
font-family:'Plus Jakarta Sans',system-ui,sans-serif;
font-size:15px;font-weight:600;
color:var(--c-primary);
border-radius:10px;
text-decoration:none;
transition:background .2s ease,color .2s ease,padding-left .2s ease;
position:relative;
letter-spacing:-.2px;
}
.nav-links a::after{display:none}
.nav-links a:hover{background:var(--c-light);padding-left:20px}
.nav-links a.active{
background:linear-gradient(90deg, rgba(196,156,93,.12), rgba(196,156,93,0));
color:var(--c-accent);
padding-left:20px;
}
.nav-links a.active::before{
content:"";
position:absolute;left:6px;top:50%;transform:translateY(-50%);
width:3px;height:22px;border-radius:2px;
background:var(--c-accent);
}
.nav-links a.nav-tool{
margin-top:4px;
background:linear-gradient(135deg, var(--c-primary), #1a3a5f);
color:#fff;
justify-content:center;
padding:13px 16px;
font-size:13.5px;
letter-spacing:.3px;
}
.nav-links a.nav-tool:hover{background:var(--c-accent);color:#1a1a1a}
.nav-links a.nav-tool.active{background:var(--c-accent);color:#1a1a1a}
.nav-links a.nav-tool.active::before{display:none}
/* Drawer alt alanı — CTA + iletişim + sosyal */
.nav-mobile-foot{
display:flex !important;
flex-direction:column;gap:14px;
padding:18px 20px 24px;
border-top:1px solid var(--c-border);
background:linear-gradient(180deg, #fafbfc, #ffffff);
margin-top:auto;
}
.nav-mobile-cta{
display:inline-flex !important;
align-items:center;justify-content:center;gap:8px;
width:100%;padding:14px 18px;
font-size:13.5px;font-weight:700;letter-spacing:.3px;
border-radius:999px;
box-shadow:0 6px 18px rgba(196,156,93,.32);
}
.nav-mobile-contact{
display:flex;flex-direction:column;gap:8px;
padding-top:4px;
}
.nm-contact,.nm-hours{
display:flex;align-items:center;gap:10px;
padding:8px 4px;
font-size:13px;font-weight:500;
color:var(--c-primary);
text-decoration:none;
transition:color .2s ease;
}
.nm-contact:hover{color:var(--c-accent)}
.nm-contact i,.nm-hours i{
width:30px;height:30px;
display:inline-flex;align-items:center;justify-content:center;
background:var(--c-light);
border-radius:8px;
font-size:12px;color:var(--c-accent);
flex-shrink:0;
}
.nm-hours{color:var(--c-muted);font-size:12.5px}
.nav-mobile-social{
display:flex;gap:8px;justify-content:center;
padding-top:6px;
border-top:1px dashed var(--c-border);
margin-top:2px;
padding-top:14px;
}
.nav-mobile-social a{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;
background:var(--c-light);color:var(--c-primary);
text-decoration:none;
transition:all .2s ease;
-webkit-tap-highlight-color:rgba(0,0,0,.08);
}
.nav-mobile-social a:hover{background:var(--c-accent);color:#fff;transform:translateY(-2px)}
.nav-mobile-social i{font-size:14px}
/* Backdrop */
.nav-backdrop{
display:block;
position:fixed;inset:0;
background:rgba(11,37,69,.55);
backdrop-filter:blur(2px);
z-index:9997;
opacity:0;visibility:hidden;
transition:opacity .3s ease,visibility 0s linear .3s;
border:0;padding:0;cursor:pointer;
}
.header.open .nav-backdrop{
opacity:1;visibility:visible;
transition:opacity .3s ease;
}
/* Hamburger animasyonu */
.hamburger{display:flex;z-index:9999;position:relative}
.header-cta .btn{display:none}
/* Mobilde topbar gizli — tüm bilgiler menü drawer'ında */
.topbar{display:none}
.hero-grid{grid-template-columns:1fr;min-height:auto}
.hero-text{padding:70px 24px 50px}
.hero-form-wrap{padding:50px 24px 70px}
.hs-row{flex-wrap:wrap}
.hs-row .sep{display:none}
.categories{grid-template-columns:repeat(3,1fr)}
.listings,.projects{grid-template-columns:repeat(2,1fr)}
.services{grid-template-columns:repeat(2,1fr);gap:14px}
.lp-list{grid-template-columns:repeat(2,1fr);gap:18px}
.agents{grid-template-columns:repeat(2,1fr)}
.about-grid{grid-template-columns:1fr}
.cities{grid-template-columns:repeat(2,1fr)}
.cities .city:nth-child(1){grid-row:span 1;min-height:230px}
.blog-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
/* İlanlar sayfası mobil: filtre drawer'a dönüşür, ilanlar üstte */
.lp-grid{grid-template-columns:1fr;gap:0}
.sidebar{
position:fixed !important;
left:0;top:0;bottom:0;width:90vw;max-width:360px;
z-index:1000;
transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
border-radius:0;border:0;
padding:18px 18px 24px;
overflow-y:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 0 60px rgba(0,0,0,.35);
background:#fff;
}
.sidebar.open{transform:translateX(0);-webkit-transform:translateX(0)}
.sb-head{display:flex !important;position:sticky;top:-18px;background:#fff;padding-top:18px;margin-top:-18px;z-index:2}
.sb-close{cursor:pointer}
.filter-btn{display:inline-flex !important}
/* Mobil sabit FAB filtre butonu — body'nin doğrudan child'ı, hep tıklanır */
.mobile-filter-fab{display:inline-flex !important}
.filter-backdrop{z-index:999}
/* ilanları üstte göster, listing-page'in kolonu zaten 1fr olduğu için sidebar absolute drawer */
.lp-grid > aside{order:2}
.lp-grid > div{order:1}
/* Tek satır, wrap yok — sıra: Filtrele → İlan sayısı → Sırala → Kopyala */
.list-toolbar{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:6px;
padding:12px 14px;
overflow:hidden;
}
.filter-btn{
order:1;
flex:0 0 auto;
padding:9px 12px;
font-size:12px;
white-space:nowrap;
}
.list-count{
order:2;
flex:1 1 auto;
min-width:0;
font-size:12px;
padding:0;margin:0;border:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-align:center;
}
.list-tools{
order:3;
flex:0 0 auto;
display:flex;
align-items:center;
gap:6px;
justify-content:flex-end;
}
.list-tools select{
flex:0 0 auto;
min-width:100px;max-width:140px;
padding:9px 24px 9px 10px;
font-size:11.5px;
}
.view-toggle{display:none}
/* Filtre açıkken arka planı kilitle — body:position:fixed (JS) zaten scroll'u
engelliyor; touch-action:none iOS'ta sidebar içindeki butonlara click yaymıyordu,
bu yüzden artık koymuyoruz. */
body.filter-open .sidebar,
body.filter-open .sidebar *{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.06)}
/* Form alanları üstte ve dokunulabilir kalsın */
.sidebar form,
.sidebar .filter-group,
.sidebar input,
.sidebar select{position:relative;z-index:2;pointer-events:auto}
/* Range row mobilde — fiyat input'larına ferah alan */
.sidebar .range-row{display:flex;gap:8px;align-items:stretch}
.sidebar .range-row input{
flex:1;min-height:44px;font-size:16px; /* 16px iOS zoom önler */
-webkit-appearance:none;appearance:none;
}
.detail-grid{grid-template-columns:1fr;gap:24px}
.detail-side{position:static}
.dt-grid{grid-template-columns:1fr;gap:18px}
.dt-right{position:static}
.dt-thumbs{grid-template-columns:repeat(6,1fr)}
.dt-form .dt-form-row{grid-template-columns:1fr}
.dt-call .btn{min-width:auto}
.similar-grid{grid-template-columns:repeat(3,1fr);gap:14px}
.calc-grid{grid-template-columns:1fr;gap:18px}
.calc-result{position:static}
.calc-form{padding:24px 22px}
.cr-value{font-size:32px}
.ff-grid{grid-template-columns:1fr;gap:18px}
.ff-checks{grid-template-columns:repeat(2,1fr)}
.finder-form{padding:22px}
.finder-intro h2{font-size:22px}
.ff-actions{flex-direction:column-reverse}
.ff-actions .btn{width:100%;justify-content:center}
/* Wizard mobil */
.wz-hero{padding:60px 0 50px}
.wz-pane{padding:36px 24px 28px}
.wz-head{margin-bottom:30px;padding-bottom:24px}
.wz-head h2{font-size:22px}
.wz-nav{padding:18px 24px;gap:10px}
.wz-nav .btn{padding:12px 18px;font-size:12px}
.wz-stepper{padding:0;margin-bottom:24px}
.wz-stepper::before{left:14%;right:14%;top:15px}
.wz-num{width:32px;height:32px;font-size:12px}
.wz-name{font-size:9.5px;letter-spacing:1px}
.wz-row-2{grid-template-columns:1fr;gap:14px}
.wz-options{grid-template-columns:1fr}
.wz-options-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.wz-opt{padding:18px 16px}
.wz-opt strong{font-size:14px}
.wz-feats{grid-template-columns:repeat(2,1fr)}
.wz-progress{display:none}
.wz-budget-presets{gap:8px}
.head-line{font-size:13px;gap:10px}
.head-line b{font-size:14.5px}
.detail-head h1{font-size:22px}
.dh-price{font-size:24px}
.dh-right{text-align:left;width:100%}
.dh-tags{justify-content:flex-start}
.tabs-content{padding:18px}
.similar-block .listings{grid-template-columns:1fr}
.gallery{
height:auto;
grid-template-columns:repeat(4,1fr);
grid-template-rows:auto auto;
gap:6px;
}
.gallery .g-main{grid-column:1 / span 4;grid-row:1;aspect-ratio:16/10}
.gallery .g-mini{aspect-ratio:1/1}
.simple-grid,.contact-grid{grid-template-columns:1fr}
.news-grid,.cta-grid{grid-template-columns:1fr;text-align:center}
.cta-actions{justify-content:center}
}
@media (max-width:768px){
body.has-mbar .mobile-nav{display:flex}
body.has-mbar{padding-bottom:74px}
body.has-mbar .whatsapp-fab{bottom:84px;right:14px;width:46px;height:46px;font-size:20px}
body.has-mbar .to-top{bottom:84px;left:14px}
}
@media (max-width:680px){
.section{padding:60px 0}
.topbar{font-size:12px;padding:8px 0}
.topbar-right{justify-content:center;width:100%;gap:10px}
.topbar-right a{font-size:12px}
.hero{min-height:auto;padding:50px 0}
.hero-stats{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.hero-stats .stat strong{font-size:32px}
.categories{grid-template-columns:repeat(2,1fr)}
.listings{grid-template-columns:repeat(2,1fr);gap:12px}
.projects,.agents{grid-template-columns:1fr}
.services{grid-template-columns:1fr;gap:12px}
.service{padding:24px 22px}
/* İlan kartı — sıkı düzen */
.listing-body{padding:12px}
.listing-body .loc{font-size:9.5px;letter-spacing:1.2px;margin-bottom:6px}
.listing-body h3{
font-size:13px;line-height:1.3;margin-bottom:10px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
.features{padding:10px 0;margin-bottom:10px;row-gap:6px;font-size:10.5px}
.features li{padding:2px 0;letter-spacing:0}
.listing-foot{flex-direction:column;align-items:flex-start;gap:8px}
.price{font-size:15.5px}
.price span,.price small{font-size:10.5px}
.btn-link{font-size:10px;letter-spacing:1px;padding-bottom:2px}
.l-tag{font-size:8.5px;padding:4px 8px;letter-spacing:.8px}
.l-tags{top:8px;left:8px;gap:4px}
.lp-list{grid-template-columns:repeat(2,1fr);gap:14px}
.filter-btn{padding:9px 14px;font-size:12px}
.list-toolbar{padding:12px 14px}
.sidebar{width:92%;padding:18px}
.listing-body{padding:16px}
.listing-body h3{font-size:14.5px;min-height:auto;margin-bottom:12px}
.listing-body .loc{font-size:10px;letter-spacing:1.5px}
.features{grid-template-columns:repeat(2,1fr);row-gap:8px;font-size:11.5px}
.features li{padding:3px 0}
.features li+li::before{display:none}
.features li:nth-child(2)::before,
.features li:nth-child(4)::before{
display:block;content:"";position:absolute;left:0;top:15%;height:70%;width:1px;background:var(--c-border);
}
.price{font-size:18px}
.l-tag{font-size:9.5px;padding:5px 9px;letter-spacing:1px}
.l-tag i{font-size:9px}
.cities{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr;gap:30px}
.blog-card.small{flex-direction:column}
.blog-card.small img{width:100%;aspect-ratio:16/10}
.row-head{flex-direction:column;align-items:flex-start}
.lp-list{grid-template-columns:repeat(2,1fr);gap:10px}
/* Mobilde ilan kartları kısa olsun */
.lp-list .listing-media{aspect-ratio:16/11} /* 4:3 yerine daha alçak görsel */
.lp-list .listing-body{padding:10px 12px}
.lp-list .listing-body .loc{font-size:9.5px;letter-spacing:1.2px;margin-bottom:4px}
.lp-list .listing-body h3{
font-size:13px;line-height:1.3;margin-bottom:8px;
-webkit-line-clamp:2;
min-height:auto;
}
.lp-list .features{padding:8px 0;margin-bottom:8px;row-gap:4px;font-size:10.5px}
.lp-list .features li{padding:1px 0}
.lp-list .price{font-size:14.5px}
.lp-list .price span,.lp-list .price small{font-size:10px}
.lp-list .listing-foot{flex-direction:row;align-items:center;justify-content:space-between;gap:6px}
.lp-list .btn-link{font-size:9.5px;letter-spacing:.6px;padding:5px 10px}
/* Sahip şeridi mobilde kart altı küçük ve sade */
/* Sahip şeridi — mobilde her yerde küçük (anasayfa + ilanlar) */
.listing .l-owner{margin-top:8px;padding-top:8px;gap:6px}
.listing .l-owner-avatar{
width:22px !important;height:22px !important;
min-width:22px;max-width:22px;
font-size:10px;border-width:1px;
flex:0 0 22px;
}
.listing .l-owner-name{font-size:11px}
.listing .l-owner-role{font-size:9px;letter-spacing:1px;margin-top:0}
/* L-tag mobilde küçük */
.lp-list .l-tag{font-size:8.5px;padding:3px 7px;letter-spacing:.6px}
.head-line{font-size:12.5px;gap:8px}
.head-line b{font-size:13.5px}
.head-line em{font-size:11px}
.dt-title{font-size:18px}
.dg-thumbs{grid-template-columns:repeat(4,1fr)}
.dt-spec th,.dt-spec td{padding:10px 14px;font-size:12.5px}
.dp-amount{font-size:28px}
.similar-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.sim-body h4{font-size:12.5px;min-height:auto}
.sim-price{font-size:14.5px}
.sim-img{aspect-ratio:1/1}
.dp-amount em{font-size:17px}
.dt-block{padding:18px}
.dt-block h2{font-size:15px}
.dt-contact-card{padding:18px}
.spec-list{grid-template-columns:1fr;gap:0}
.spec-list li{padding:13px 14px;font-size:13px}
.spec-list li:nth-child(4n+1),
.spec-list li:nth-child(4n+4){background:transparent}
.spec-list li:nth-child(odd){background:#fafaf7}
.spec-list li:nth-child(odd):hover{background:var(--c-light)}
.contact-form-big{grid-template-columns:1fr}
.contact-form-big h3,.contact-form-big textarea,.contact-form-big button{grid-column:span 1}
.stats-strip{grid-template-columns:repeat(2,1fr)}
.stats-strip .stat strong{font-size:32px}
.search-tabs{overflow-x:auto;flex-wrap:nowrap}
.search-tabs .tab{padding:12px 14px;font-size:12.5px}
.detail-head{flex-direction:column}
.dh-right{text-align:left}
.dh-tags{justify-content:flex-start}
}
/* ======================================================
İlan detay — galeri zoom, lightbox, EIDS rozeti
====================================================== */
/* Ana resim üstüne hover'da "Büyült" rozeti */
.dg-main { position: relative; cursor: zoom-in; }
.dg-main .dg-zoom {
position: absolute; right: 14px; top: 14px;
background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
color: #fff; padding: 6px 14px; border-radius: 50px;
font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; gap: 6px;
opacity: 0; transition: opacity .2s;
}
.dg-main:hover .dg-zoom { opacity: 1; }
.dg-thumbs .dgt { cursor: pointer; transition: opacity .15s, transform .15s; }
.dg-thumbs .dgt:hover { opacity: .85; }
.dg-thumbs .dgt.active { outline: 3px solid #c8102e; outline-offset: -3px; }
.dg-thumbs { overflow-x: auto; scrollbar-width: thin; }
/* ──────────────────────────────────────────────
EIDS Doğrulama rozeti — kurumsal
────────────────────────────────────────────── */
.dt-eids {
position: relative;
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, #ffffff 0%, #f4f9fc 100%);
border: 1px solid #d8e6f0;
padding: 16px 18px;
border-radius: 12px;
margin: 0 0 18px;
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 4px 14px -6px rgba(15,82,138,.18);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.dt-eids::before {
content: '';
position: absolute; right: -40px; top: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(0,131,191,.08) 0%, transparent 65%);
pointer-events: none;
}
.dt-eids:hover {
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 8px 22px -8px rgba(15,82,138,.28);
}
.dt-eids-logo {
flex-shrink: 0;
width: 58px; height: 58px;
background: #fff;
border: 1px solid #e1ebf2;
border-radius: 10px;
padding: 6px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(15,82,138,.08);
}
.dt-eids-logo img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.dt-eids-text {
flex: 1;
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.dt-eids-text strong {
color: #0a4d6e;
font-size: 14.5px;
font-weight: 700;
letter-spacing: -.2px;
line-height: 1.3;
}
.dt-eids-text small {
color: #4d7a96;
font-size: 11.5px;
font-weight: 500;
letter-spacing: .2px;
}
.dt-eids-check {
flex-shrink: 0;
width: 32px; height: 32px;
background: linear-gradient(135deg, #16a34a, #22c55e);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
box-shadow: 0 4px 12px -3px rgba(22,163,74,.45);
position: relative;
z-index: 1;
}
.dt-eids-check::after {
content: '';
position: absolute; inset: -3px;
border: 2px solid rgba(22,163,74,.18);
border-radius: 50%;
}
@media (max-width: 480px) {
.dt-eids { padding: 12px 14px; gap: 12px; }
.dt-eids-logo { width: 48px; height: 48px; padding: 4px; }
.dt-eids-text strong { font-size: 13px; }
.dt-eids-text small { font-size: 10.5px; }
.dt-eids-check { width: 28px; height: 28px; font-size: 11px; }
}
/* Lightbox */
.lb-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(10,12,18,.95);
display: none;
align-items: center; justify-content: center;
}
.lb-overlay.lb-open {
display: flex;
animation: lbFade .2s ease;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
.lb-stage {
max-width: 92vw; max-height: 88vh;
display: flex; align-items: center; justify-content: center;
}
.lb-stage img {
max-width: 100%; max-height: 88vh;
width: auto; height: auto;
border-radius: 6px;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
user-select: none;
}
.lb-close, .lb-nav {
position: absolute;
background: rgba(255,255,255,.1);
border: 0; color: #fff;
width: 48px; height: 48px;
border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
transition: background .2s, transform .15s;
backdrop-filter: blur(8px);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-2px); }
.lb-next:hover { transform: translateY(-50%) translateX(2px); }
.lb-counter {
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,.85);
background: rgba(0,0,0,.5);
padding: 8px 16px; border-radius: 50px;
font-size: 13px; font-weight: 600;
letter-spacing: .3px;
backdrop-filter: blur(8px);
}
@media (max-width: 640px) {
.lb-close { top: 14px; right: 14px; width: 40px; height: 40px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-nav { width: 40px; height: 40px; font-size: 15px; }
}
/* Büyük resim üzerindeki ileri/geri okları */
.dg-main { position: relative; }
.dg-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border: 0; border-radius: 50%;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
color: #fff; font-size: 15px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity .2s, background .2s, transform .15s;
z-index: 2;
}
.dg-main:hover .dg-arrow { opacity: 1; }
.dg-arrow:hover { background: rgba(0,0,0,.78); }
.dg-arrow:active { transform: translateY(-50%) scale(.92); }
.dg-arrow-prev { left: 14px; }
.dg-arrow-next { right: 14px; }
/* Mobilde her zaman görünür */
@media (max-width: 768px) {
.dg-arrow { opacity: 1; width: 38px; height: 38px; font-size: 13px; }
.dg-arrow-prev { left: 8px; }
.dg-arrow-next { right: 8px; }
}
/* İletişim bloğu — avatar + isim başlık */
.dt-contact-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 18px;
}
.dt-contact-avatar {
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 4px 14px -4px rgba(0,0,0,.18);
flex-shrink: 0;
}
.dt-contact-head h2 { margin: 0 0 2px; font-size: 20px; }
.dt-contact-head .dt-contact-name {
margin: 0; color: var(--c-muted); font-size: 13.5px; font-weight: 500;
letter-spacing: -.1px;
}
/* ─────────────────────────────────────────────
SEO Anahtar Kelime Bulutu — sayfa altında
───────────────────────────────────────────── */
.seo-tags {
margin: 50px 0 20px;
padding: 32px 28px;
background: linear-gradient(135deg, #fafbfc 0%, #f4f9fc 100%);
border: 1px solid var(--c-border);
border-radius: 12px;
}
.seo-tags h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--c-primary);
font-size: 20px;
font-weight: 700;
letter-spacing: -.3px;
margin: 0 0 6px;
}
.seo-tags .seo-tags-sub {
color: var(--c-muted);
font-size: 13.5px;
margin: 0 0 22px;
}
.seo-tags-cloud {
display: flex; flex-wrap: wrap; gap: 8px;
}
.seo-tag {
display: inline-flex; align-items: center;
padding: 8px 14px;
background: #fff;
border: 1px solid #e0e6ed;
border-radius: 50px;
color: #475569;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all .18s ease;
white-space: nowrap;
}
.seo-tag::before {
content: '#';
color: #94a3b8;
font-weight: 600;
margin-right: 5px;
transition: color .18s;
}
.seo-tag:hover {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
transform: translateY(-1px);
box-shadow: 0 4px 10px -3px rgba(11,37,69,.3);
}
.seo-tag:hover::before { color: rgba(255,255,255,.65); }
@media (max-width: 600px) {
.seo-tags { padding: 22px 18px; }
.seo-tags h3 { font-size: 17px; }
.seo-tag { padding: 6px 12px; font-size: 12px; }
}
/* Toast bildirim — paylaş + diğer */
.toast {
position: fixed; bottom: 30px; left: 50%;
transform: translate(-50%, 100px);
background: #0b2545; color: #fff;
padding: 14px 22px; border-radius: 50px;
font-size: 13.5px; font-weight: 600;
letter-spacing: -.1px;
box-shadow: 0 12px 40px -8px rgba(0,0,0,.4);
opacity: 0; pointer-events: none;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
z-index: 99999;
max-width: 90vw;
word-break: break-all;
display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.toast-ok { background: linear-gradient(135deg, #15803d, #16a34a); }
.toast.toast-err { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.toast::before {
font-family: "Font Awesome 6 Free"; font-weight: 900;
content: "\f0c5"; /* copy icon */
}
.toast.toast-ok::before { content: "\f00c"; /* check */ }
.toast.toast-err::before { content: "\f071"; /* warn */ }
/* Listing-card paylaş butonu hover efekti */
.l-share { cursor: pointer; }
.l-share:hover i { color: var(--c-accent, #c8102e); }
/* İlan detay — başlık üstündeki sahip bandı */
.dt-owner{
display:flex;align-items:center;gap:14px;
background:#fff;
border:1px solid var(--c-border);border-radius:8px;
padding:14px 18px;margin-bottom:18px;
}
.dt-owner-avatar{
width:50px;height:50px;border-radius:50%;
object-fit:cover;flex-shrink:0;
border:2px solid var(--c-accent);
background:var(--c-light);
display:flex;align-items:center;justify-content:center;
font-weight:700;color:var(--c-primary);font-size:18px;
font-family:'Plus Jakarta Sans',sans-serif;
}
.dt-owner-info{display:flex;flex-direction:column;flex:1;min-width:0}
.dt-owner-role{
font-size:10.5px;letter-spacing:2px;text-transform:uppercase;
color:var(--c-accent);font-weight:700;margin-bottom:2px;
}
.dt-owner-name{
color:var(--c-primary);font-size:16px;font-weight:700;letter-spacing:-.2px;
}
.dt-owner-actions{display:flex;align-items:center;gap:8px}
.dt-owner-btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:50px;
font-size:13.5px;font-weight:700;letter-spacing:.2px;
transition:all .2s ease;
}
.dt-owner-call{
background:var(--c-primary);color:#fff;
}
.dt-owner-call:hover{background:var(--c-accent);color:#1a1a1a}
.dt-owner-wp{
background:#25d366;color:#fff;font-size:18px;
width:42px;height:42px;justify-content:center;padding:0;
}
.dt-owner-wp:hover{background:#1aaf52;color:#fff;transform:translateY(-1px)}
@media (max-width:680px){
.dt-owner{flex-wrap:wrap;padding:12px 14px;gap:10px}
.dt-owner-actions{width:100%;justify-content:flex-end}
.dt-owner-call{flex:1;justify-content:center}
}
/* İlan detay başlık + paylaş butonu */
.dt-title-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin-bottom: 16px;
}
.dt-title-row .dt-title { margin: 0; flex: 1; min-width: 0; }
.dt-share-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: #fff;
border: 1.5px solid var(--c-border, #e5e7eb);
border-radius: 50px;
color: var(--c-primary, #0b2545);
font-size: 13.5px; font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all .18s ease;
}
.dt-share-btn:hover {
border-color: var(--c-primary, #0b2545);
background: var(--c-primary, #0b2545);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(11,37,69,.3);
}
.dt-share-btn i { font-size: 14px; }
@media (max-width: 600px) {
.dt-share-btn { padding: 8px 14px; font-size: 12.5px; }
.dt-share-btn span { display: none; }
}
/* ─────────────────────────────────────────────
Cookie Consent — Minimalist (sağ alt, ince)
───────────────────────────────────────────── */
.ck {
position: fixed;
left: 50%; bottom: 20px;
z-index: 9990;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 10px;
box-shadow: 0 12px 40px -10px rgba(15, 23, 42, .25);
padding: 14px 18px;
display: flex; align-items: center; gap: 14px;
max-width: 480px;
width: calc(100% - 40px);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
opacity: 0;
transform: translate(-50%, 12px);
transition: opacity .25s ease, transform .25s ease;
/* ÖNEMLİ: ck-show olmadığı sürece click intercept etmesin (filtre butonunu örtüyordu) */
pointer-events: none;
}
.ck.ck-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* Filtre drawer açıkken cookie banner'ı da gizle — buton önünü kapatmasın */
body.filter-open .ck { display: none !important; }
.ck-msg {
margin: 0; flex: 1;
font-size: 13px; line-height: 1.5;
color: #475569;
}
.ck-msg strong { color: #0b2545; font-weight: 600; }
.ck-msg a {
color: #0b2545; text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.ck-msg a:hover { color: #c8102e; }
.ck-btns {
display: flex; gap: 6px; flex-shrink: 0;
}
.ck-btn {
border: 0; cursor: pointer;
padding: 8px 14px;
border-radius: 6px;
font-size: 12.5px; font-weight: 600;
font-family: inherit;
transition: all .15s ease;
white-space: nowrap;
}
.ck-btn-ghost {
background: transparent;
color: #64748b;
}
.ck-btn-ghost:hover { background: #f1f5f9; color: #0b2545; }
.ck-btn-fill {
background: #0b2545;
color: #fff;
}
.ck-btn-fill:hover { background: #13315c; }
.ck-x {
background: transparent; border: 0; cursor: pointer;
width: 24px; height: 24px;
font-size: 18px; color: #94a3b8;
display: flex; align-items: center; justify-content: center;
line-height: 1; padding: 0;
transition: color .15s;
}
.ck-x:hover { color: #0b2545; }
@media (max-width: 580px) {
.ck {
left: 12px; right: 12px; bottom: 12px;
width: auto;
max-width: none;
padding: 12px 14px;
flex-wrap: wrap;
transform: translateY(12px);
}
.ck.ck-show { transform: translateY(0); }
.ck-msg { font-size: 12.5px; flex-basis: calc(100% - 30px); }
.ck-x { order: -1; margin-left: auto; }
.ck-btns { width: 100%; justify-content: flex-end; }
}
/* ─────────────────────────────────────────────
Legal Pages — KVKK / Gizlilik / Çerez
───────────────────────────────────────────── */
.legal-section {
padding: 60px 0 80px;
background: #fafbfc;
}
.legal-content {
max-width: 820px;
background: #fff;
padding: 50px 56px;
border-radius: 12px;
box-shadow: 0 2px 12px -4px rgba(15, 23, 42, .08);
border: 1px solid #eef2f6;
}
.legal-meta {
font-size: 12.5px;
color: #94a3b8;
margin: 0 0 30px;
padding-bottom: 18px;
border-bottom: 1px solid #eef2f6;
letter-spacing: .3px;
}
.legal-content h2 {
font-family: 'Playfair Display', serif;
color: #0b2545;
font-size: 22px;
font-weight: 600;
letter-spacing: -.3px;
margin: 34px 0 14px;
padding-bottom: 10px;
border-bottom: 2px solid #d4a256;
display: inline-block;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
color: #1e293b;
font-size: 16px;
font-weight: 600;
margin: 22px 0 10px;
}
.legal-content p {
color: #475569;
font-size: 14.5px;
line-height: 1.8;
margin: 0 0 14px;
}
.legal-content ul {
margin: 0 0 18px;
padding: 0;
list-style: none;
}
.legal-content ul li {
position: relative;
padding-left: 24px;
color: #475569;
font-size: 14.5px;
line-height: 1.7;
margin-bottom: 8px;
}
.legal-content ul li::before {
content: "›";
position: absolute;
left: 4px; top: -2px;
color: #d4a256;
font-weight: 700;
font-size: 18px;
line-height: 1.5;
}
.legal-content strong { color: #0b2545; font-weight: 600; }
.legal-content a {
color: #0b2545;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.legal-content a:hover { color: #c8102e; }
.legal-content code {
background: #f1f5f9;
padding: 2px 8px;
border-radius: 4px;
font-size: 12.5px;
color: #0b2545;
}
.legal-table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 24px;
font-size: 13.5px;
}
.legal-table thead th {
background: #0b2545;
color: #fff;
text-align: left;
padding: 12px 16px;
font-weight: 600;
font-size: 13px;
letter-spacing: .2px;
}
.legal-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid #eef2f6;
color: #475569;
vertical-align: top;
}
.legal-table tbody tr:nth-child(even) { background: #fafbfc; }
.legal-contact {
background: linear-gradient(135deg, #f4f9fc, #fafbfc);
padding: 18px 22px;
border-radius: 8px;
border-left: 3px solid #d4a256;
margin: 16px 0 20px;
}
.legal-contact div { margin-bottom: 6px; font-size: 14px; color: #475569; }
.legal-contact div:last-child { margin-bottom: 0; }
.legal-contact strong { color: #0b2545; }
@media (max-width: 600px) {
.legal-content { padding: 30px 22px; }
.legal-content h2 { font-size: 18px; }
.legal-content p, .legal-content ul li { font-size: 13.5px; }
.legal-table { font-size: 12.5px; }
.legal-table thead th, .legal-table tbody td { padding: 10px 12px; }
}
/* ─────────────────────────────────────────────
Filter sidebar — geliştirilmiş kontroller
───────────────────────────────────────────── */
.sidebar h4 small {
font-weight: 500; font-size: 11px;
color: var(--c-muted); margin-left: 6px;
}
/* Segmented control (durum) */
.seg {
display: flex; gap: 4px;
background: #f1f5f9;
padding: 4px; border-radius: 8px;
}
.seg-btn {
flex: 1; cursor: pointer;
position: relative;
}
.seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.seg-btn span {
display: block; padding: 8px 6px;
text-align: center;
font-size: 13px; font-weight: 600;
color: #64748b;
border-radius: 6px;
transition: all .15s ease;
}
.seg-btn input:checked + span {
background: #ffffff;
color: var(--c-primary);
box-shadow: 0 2px 6px rgba(11,37,69,.12);
}
/* Chip grid (oda sayısı çoklu seçim) */
.chip-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.chip {
position: relative; cursor: pointer;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
display: block;
padding: 9px 12px;
text-align: center;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 8px;
font-size: 13px; font-weight: 600;
color: #475569;
transition: all .15s ease;
}
.chip span em {
font-style: normal;
font-weight: 400;
font-size: 11px;
opacity: .65;
margin-left: 3px;
}
.chip:hover span { border-color: var(--c-primary); color: var(--c-primary); }
.chip input:checked + span {
background: var(--c-primary);
border-color: var(--c-primary);
color: #fff;
}
.chip input:checked + span em { opacity: .8; }
/* Konum select grubu — daha kompakt */
.sidebar select:disabled {
background: #f8fafc;
color: #94a3b8;
cursor: not-allowed;
}
/* Range row daha tertipli */
.sidebar .range-row {
display: grid; grid-template-columns: 1fr auto 1fr;
gap: 8px; align-items: center;
}
.sidebar .range-row::before {
display: none; /* eski "—" varsa */
}
.sidebar .range-row input {
margin: 0;
}
/* Filtrele butonu içindeki ikon */
.sidebar .btn-block {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.sidebar .btn-block i { font-size: 13px; }
/* ═══════════════════════════════════════════════════════════════════════
FİLTRE AKSİYON BARI — form DIŞINDA, drawer'ın altında sabit.
Mobilde sticky bottom (her zaman görünür), desktop'ta normal flow.
═══════════════════════════════════════════════════════════════════════ */
.sb-actions {
display: flex; flex-direction: column; gap: 10px;
margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--c-border);
position: relative; z-index: 10;
pointer-events: auto;
}
.sb-actions #filterApplyBtn,
.sb-actions #filterResetBtn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
position: relative; z-index: 11;
pointer-events: auto !important;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,.08);
-webkit-appearance: none; appearance: none;
cursor: pointer;
user-select: none; -webkit-user-select: none;
}
.sb-actions #filterApplyBtn {
padding: 14px 18px;
font-size: 14px; font-weight: 700;
background: var(--c-accent); color: #fff;
border: 0; border-radius: 999px;
box-shadow: 0 4px 14px rgba(196,156,93,.28);
transition: transform .15s ease, box-shadow .15s ease;
}
.sb-actions #filterApplyBtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(196,156,93,.36); }
.sb-actions #filterApplyBtn:active { transform: translateY(0); }
.sb-actions #filterApplyBtn i { font-size: 13px; }
.sb-actions #filterResetBtn {
padding: 10px 14px;
font-size: 13px; font-weight: 600;
background: transparent; color: var(--c-muted);
border: 0;
text-decoration: none;
}
.sb-actions #filterResetBtn:hover { color: var(--c-primary); }
.sb-actions #filterResetBtn i { font-size: 12px; }
/* Mobilde: in-sidebar action bar GİZLE — body-level mobile bar kullanılır */
@media (max-width: 1100px) {
.sb-actions { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
AKTİF FİLTRE CHIP'LERİ — breadcrumb altında, X ile tekil silinir
═══════════════════════════════════════════════════════════════════════ */
.lp-active-filters {
background: #fff;
border-bottom: 1px solid var(--c-border);
padding: 12px 0;
}
.lp-chips {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.lp-chips-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600;
color: var(--c-muted);
margin-right: 4px;
}
.lp-chips-label i { font-size: 11px; color: var(--c-accent); }
.lp-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 10px 7px 12px;
background: #f3f4f6;
border: 1px solid var(--c-border);
border-radius: 999px;
font-size: 12.5px; font-weight: 600;
color: var(--c-primary);
text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .12s ease;
-webkit-tap-highlight-color: rgba(0,0,0,.08);
}
.lp-chip:hover {
background: #fee2e2; border-color: #fecaca;
}
.lp-chip:hover i { color: #dc2626; }
.lp-chip:active { transform: scale(.96); }
.lp-chip i {
font-size: 11px;
color: var(--c-muted);
transition: color .15s ease;
}
.lp-chip-clear {
background: transparent;
border-color: transparent;
color: var(--c-muted);
font-weight: 600;
padding: 7px 10px;
text-decoration: underline;
text-underline-offset: 2px;
}
.lp-chip-clear:hover {
background: transparent; border-color: transparent;
color: var(--c-accent);
}
@media (max-width: 768px) {
.lp-active-filters { padding: 10px 0; }
.lp-chips { gap: 6px; }
.lp-chips-label { font-size: 11.5px; flex: 0 0 100%; margin-bottom: 2px; }
.lp-chip { padding: 6px 9px 6px 11px; font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════
MOBİL FİLTRE AKSİYON BARI — body-level, fixed bottom.
Sidebar'ın DIŞINDA, transform/scroll bağlamına girmiyor.
Sadece body.filter-open iken görünür.
═══════════════════════════════════════════════════════════════════════ */
.mobile-filter-actions {
display: none;
position: fixed;
bottom: 0; left: 0;
width: 90vw; max-width: 360px;
z-index: 100000; /* cookie banner (9990) + toast (99999) üstünde, MAX */
background: #fff;
padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--c-border);
box-shadow: 0 -6px 20px rgba(0,0,0,.10);
gap: 8px;
align-items: center;
/* Sidebar ile birlikte slide */
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.mobile-filter-actions .mfa-apply,
.mobile-filter-actions .mfa-reset {
-webkit-appearance: none; appearance: none;
border: 0; cursor: pointer;
font-family: inherit; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0,0,0,.08);
user-select: none; -webkit-user-select: none;
}
.mobile-filter-actions .mfa-apply {
flex: 1;
background: var(--c-accent); color: #fff;
padding: 14px 18px;
font-size: 14px;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(196,156,93,.32);
}
.mobile-filter-actions .mfa-apply:active { transform: scale(.98); }
.mobile-filter-actions .mfa-apply i { font-size: 13px; }
.mobile-filter-actions .mfa-reset {
background: #f3f4f6; color: #374151;
padding: 12px 14px;
font-size: 13px;
border-radius: 999px;
}
.mobile-filter-actions .mfa-reset:active { transform: scale(.97); }
@media (max-width: 1100px) {
.mobile-filter-actions { display: flex; }
body.filter-open .mobile-filter-actions {
transform: translateX(0);
-webkit-transform: translateX(0);
pointer-events: auto;
}
}
/* ─────────────────────────────────────────────
Filter Dropdown Components — yeni
───────────────────────────────────────────── */
.sidebar form { display: flex; flex-direction: column; gap: 10px; }
/* Segmented (durum) — kompakt */
.sidebar .seg {
display: flex; gap: 3px;
background: #f1f5f9;
padding: 4px; border-radius: 10px;
margin-bottom: 6px;
}
.sidebar .seg-btn {
flex: 1; cursor: pointer;
position: relative;
}
.sidebar .seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.sidebar .seg-btn span {
display: block; padding: 9px 6px;
text-align: center;
font-size: 13px; font-weight: 600;
color: #64748b;
border-radius: 7px;
transition: all .15s ease;
}
.sidebar .seg-btn input:checked + span {
background: #ffffff;
color: var(--c-primary);
box-shadow: 0 2px 6px rgba(11,37,69,.12);
}
/* Dropdown */
.dd { position: relative; }
.dd-trigger {
width: 100%;
display: flex; align-items: center; gap: 8px;
padding: 13px 16px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font-family: inherit;
font-size: 14px; font-weight: 500;
color: var(--c-text, #1d2939);
cursor: pointer;
text-align: left;
transition: all .15s ease;
}
.dd-trigger:hover:not(:disabled) {
border-color: var(--c-primary);
}
.dd-trigger:disabled {
background: #f8fafc;
color: #cbd5e1;
cursor: not-allowed;
border-color: #e5e7eb;
}
.dd-label {
flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-count {
background: var(--c-primary, #0b2545);
color: #fff;
font-size: 11px; font-weight: 700;
min-width: 20px; height: 20px;
border-radius: 50px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 6px;
}
.dd-chev {
font-size: 11px;
color: #94a3b8;
transition: transform .2s ease;
}
.dd.dd-open .dd-chev { transform: rotate(180deg); color: var(--c-primary); }
.dd.dd-has .dd-trigger {
border-color: var(--c-primary);
color: var(--c-primary);
font-weight: 600;
}
/* Panel */
.dd-panel {
position: absolute;
left: 0; right: 0;
top: calc(100% + 6px);
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 32px -8px rgba(15,23,42,.18);
max-height: 320px;
overflow-y: auto;
padding: 6px;
z-index: 50;
display: none;
}
.dd.dd-open .dd-panel { display: block; }
/* Panel scrollbar — minimalist */
.dd-panel::-webkit-scrollbar { width: 6px; }
.dd-panel::-webkit-scrollbar-track { background: transparent; }
.dd-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 6px; }
.dd-panel::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* Option */
.dd-opt {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border-radius: 7px;
cursor: pointer;
font-size: 13.5px;
color: #475569;
transition: background .12s ease;
}
.dd-opt:hover { background: #f8fafc; color: var(--c-primary); }
.dd-opt input {
width: 16px; height: 16px;
accent-color: var(--c-primary);
cursor: pointer;
}
.dd-opt span {
flex: 1;
display: flex; align-items: center; gap: 6px;
}
.dd-opt em {
font-style: normal;
color: #94a3b8;
font-size: 12px;
font-weight: 400;
}
/* Min-Max Range (yeni) */
.rng {
background: #fafbfc;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px 14px;
}
.rng-label {
font-size: 12.5px;
font-weight: 600;
color: var(--c-primary, #0b2545);
margin-bottom: 8px;
letter-spacing: -.1px;
display: flex; align-items: center; gap: 6px;
}
.rng-label span {
color: #94a3b8;
font-weight: 500;
font-size: 11px;
}
.rng-row {
display: grid; grid-template-columns: 1fr 12px 1fr;
align-items: center; gap: 6px;
}
.rng-cell {
position: relative;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
display: flex; align-items: center;
padding: 0 10px;
transition: border-color .15s;
}
.rng-cell:focus-within { border-color: var(--c-primary); }
.rng-prefix {
font-size: 10.5px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 1px;
text-transform: uppercase;
flex-shrink: 0;
}
.rng-cell input {
flex: 1;
border: 0;
background: transparent;
padding: 10px 8px;
font: inherit;
font-size: 14px;
color: var(--c-text, #1d2939);
outline: 0;
font-weight: 500;
width: 100%;
}
.rng-cell input::placeholder { color: #cbd5e1; font-weight: 400; }
/* Number arrow gizle */
.rng-cell input[type=number]::-webkit-inner-spin-button,
.rng-cell input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rng-cell input[type=number] { -moz-appearance: textfield; }
.rng-sep {
height: 1px;
background: #d1d5db;
}
/* Filtre sıfırlama linki */
.btn-link-reset {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
text-align: center;
padding: 10px;
font-size: 13px;
color: #64748b;
text-decoration: none;
font-weight: 500;
transition: color .15s;
}
.btn-link-reset:hover { color: var(--c-primary); }
/* ─────────────────────────────────────────────
Min-Max Range — temiz versiyon
───────────────────────────────────────────── */
.rng2-head {
font-size: 13px;
font-weight: 600;
color: var(--c-primary, #0b2545);
margin-bottom: 8px;
letter-spacing: -.1px;
}
.rng2-head span {
color: #94a3b8;
font-weight: 500;
font-size: 11.5px;
margin-left: 2px;
}
.rng2-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.rng2-row input {
width: 100%;
padding: 12px 14px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--c-text, #1d2939);
outline: 0;
transition: border-color .15s, box-shadow .15s;
}
.rng2-row input::placeholder {
color: #cbd5e1;
font-weight: 400;
}
.rng2-row input:hover { border-color: #cbd5e1; }
.rng2-row input:focus {
border-color: var(--c-primary, #0b2545);
box-shadow: 0 0 0 3px rgba(11,37,69,.08);
}
/* Number arrow gizle */
.rng2-row input[type=number]::-webkit-inner-spin-button,
.rng2-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rng2-row input[type=number] { -moz-appearance: textfield; }
/* ─────────────────────────────────────────────
Toolbar — Linki Kopyala butonu
───────────────────────────────────────────── */
.lt-share {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 14px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 8px;
color: #475569;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all .15s;
font-family: inherit;
}
.lt-share i { font-size: 12px; }
.lt-share:hover {
border-color: var(--c-primary, #0b2545);
color: var(--c-primary, #0b2545);
background: #f8fafc;
}
.lt-share:disabled { opacity: .6; cursor: wait; }
@media (max-width: 600px) {
.lt-share span { display: none; }
.lt-share { padding: 9px 11px; }
}
/* ─────────────────────────────────────────────
Liste görünümü — yatay kart
───────────────────────────────────────────── */
.lp-list.lp-view-list {
grid-template-columns: 1fr;
gap: 16px;
}
.lp-list.lp-view-list .listing {
display: grid;
grid-template-columns: 280px 1fr;
border-radius: 12px;
}
.lp-list.lp-view-list .listing-media {
aspect-ratio: auto;
height: 100%;
min-height: 200px;
}
.lp-list.lp-view-list .listing-body {
padding: 22px 26px;
display: flex;
flex-direction: column;
gap: 8px;
}
.lp-list.lp-view-list .listing-body h3 {
font-size: 18px;
line-height: 1.35;
margin: 4px 0 6px;
}
.lp-list.lp-view-list .features {
margin-top: auto;
}
.lp-list.lp-view-list .listing-foot {
margin-top: 8px;
}
@media (max-width: 720px) {
.lp-list.lp-view-list .listing { grid-template-columns: 1fr; }
.lp-list.lp-view-list .listing-media { min-height: 220px; aspect-ratio: 16/10; }
}
/* ─────────────────────────────────────────────
Haritada İlanlar
───────────────────────────────────────────── */
.map-page {
display: grid;
grid-template-columns: 320px 1fr;
height: calc(100vh - 130px);
min-height: 600px;
background: #f4f7fa;
}
.map-filter {
background: #fff;
border-right: 1px solid #e5e7eb;
overflow-y: auto;
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.mf-head h3 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--c-primary, #0b2545);
margin: 0 0 4px;
letter-spacing: -.3px;
}
.mf-head p {
margin: 0;
font-size: 13px;
color: var(--c-muted, #64748b);
}
.mf-head strong {
color: var(--c-accent, #d4a256);
font-weight: 700;
}
.mf-form {
display: flex; flex-direction: column; gap: 12px;
padding: 16px 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.mf-group label {
display: block;
font-size: 12px;
color: var(--c-muted);
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
margin-bottom: 6px;
}
.mf-group select {
width: 100%;
padding: 10px 14px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 8px;
font: inherit; font-size: 14px;
outline: 0;
transition: border-color .15s;
}
.mf-group select:focus { border-color: var(--c-primary); }
.map-filter .seg {
display: flex; gap: 3px;
background: #f1f5f9;
padding: 4px; border-radius: 8px;
}
.map-filter .seg-btn { flex: 1; cursor: pointer; position: relative; }
.map-filter .seg-btn input { position: absolute; opacity: 0; pointer-events: none; }
.map-filter .seg-btn span {
display: block; padding: 7px 6px;
text-align: center;
font-size: 12.5px; font-weight: 600;
color: #64748b;
border-radius: 6px;
transition: all .15s;
}
.map-filter .seg-btn input:checked + span {
background: #fff;
color: var(--c-primary);
box-shadow: 0 2px 6px rgba(11,37,69,.12);
}
.mf-legend {
font-size: 12.5px;
color: var(--c-muted);
display: flex; flex-direction: column; gap: 6px;
}
.mf-legend div { display: flex; align-items: center; gap: 8px; }
.mf-legend .dot {
width: 12px; height: 12px; border-radius: 50%;
display: inline-block;
}
.mf-legend .dot-sale { background: #dc2626; }
.mf-legend .dot-rent { background: #3b82f6; }
/* Map */
.map-canvas {
width: 100%;
height: 100%;
z-index: 1;
}
/* Custom marker icon */
.pin-icon-wrap { background: transparent; border: 0; }
.pin-icon {
width: 34px; height: 42px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 14px;
position: relative;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 4px 10px rgba(0,0,0,.25);
border: 2px solid #fff;
}
.pin-icon i {
transform: rotate(45deg);
font-size: 13px;
}
/* Popup */
.leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; padding: 0; width: auto !important; }
.map-pop-wrap .leaflet-popup-content { font-family: 'Plus Jakarta Sans', sans-serif; }
.map-pop { width: 290px; }
.map-pop .mp-img {
height: 140px;
background-size: cover;
background-position: center;
background-color: #e5e7eb;
}
.map-pop .mp-body { padding: 14px 16px 16px; }
.map-pop .mp-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.map-pop .mp-tag-satilik { background: #fee2e2; color: #b91c1c; }
.map-pop .mp-tag-kiralik { background: #dbeafe; color: #1e40af; }
.map-pop h4 {
font-size: 14.5px;
font-weight: 700;
color: var(--c-primary, #0b2545);
margin: 0 0 6px;
line-height: 1.35;
letter-spacing: -.2px;
}
.map-pop .mp-loc {
font-size: 12px;
color: var(--c-muted, #64748b);
margin-bottom: 8px;
}
.map-pop .mp-loc i { color: var(--c-accent, #d4a256); margin-right: 3px; font-size: 10px; }
.map-pop .mp-feat {
display: flex; gap: 6px; flex-wrap: wrap;
list-style: none; padding: 0; margin: 0 0 10px;
}
.map-pop .mp-feat li {
background: #f1f5f9;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
color: #475569;
font-weight: 500;
}
.map-pop .mp-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px;
border-top: 1px solid #f1f5f9;
}
.map-pop .mp-price {
font-weight: 700;
font-size: 14px;
color: var(--c-primary, #0b2545);
}
.map-pop .mp-cta {
font-size: 12.5px;
font-weight: 600;
color: var(--c-accent, #d4a256);
text-decoration: none;
transition: color .15s;
}
.map-pop .mp-cta:hover { color: var(--c-primary); }
/* Cluster — varsayılan stillere ufak rötuş */
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
color: #0b2545;
}
/* Mobil */
@media (max-width: 900px) {
.map-page {
grid-template-columns: 1fr;
height: auto;
}
.map-filter {
border-right: 0;
border-bottom: 1px solid #e5e7eb;
max-height: 280px;
}
.map-canvas { height: 60vh; min-height: 400px; }
}
/* ─────────────────────────────────────────────
Krediye Uygun Mülkler Modal
───────────────────────────────────────────── */
.krmodal {
position: fixed; inset: 0; z-index: 9999;
background: rgba(11, 37, 69, .82);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 30px 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, visibility 0s linear .22s;
}
.krmodal.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .22s ease, visibility 0s linear 0s;
}
.krmodal[hidden] { display: none !important; }
.krmodal-shell {
background: #fff;
border-radius: 16px;
width: 100%; max-width: 920px;
max-height: 90vh;
display: flex; flex-direction: column;
box-shadow: 0 30px 80px -10px rgba(0,0,0,.5);
position: relative;
transform: translateY(20px) scale(.96);
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
overflow: hidden;
}
.krmodal.open .krmodal-shell { transform: translateY(0) scale(1); }
.krmodal-close {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 50%;
font-size: 20px;
color: #475569;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
transition: all .15s;
line-height: 1; padding: 0;
}
.krmodal-close:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.krmodal-head {
padding: 26px 30px;
border-bottom: 1px solid #f1f5f9;
display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, #fafbfc 0%, #f4f9fc 100%);
}
.krm-icon {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--c-primary, #0b2545), #1a4480);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
box-shadow: 0 8px 22px -4px rgba(11,37,69,.35);
}
.krmodal-head h3 {
font-family: 'Playfair Display', serif;
font-size: 22px;
font-weight: 600;
color: var(--c-primary, #0b2545);
margin: 0 0 4px;
letter-spacing: -.4px;
}
.krmodal-head p {
font-size: 13.5px;
color: var(--c-muted, #64748b);
margin: 0;
}
.krmodal-head p strong { color: var(--c-primary, #0b2545); font-weight: 700; }
.krmodal-body {
padding: 24px 30px;
overflow-y: auto;
flex: 1;
}
.krm-loading, .krm-empty {
text-align: center;
padding: 40px 20px;
color: var(--c-muted, #64748b);
font-size: 14px;
}
.krm-loading i { font-size: 22px; color: var(--c-primary); margin-right: 8px; }
.krm-empty a { color: var(--c-primary); font-weight: 600; }
.krm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.krm-card {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-decoration: none;
overflow: hidden;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.krm-card:hover {
transform: translateY(-3px);
border-color: var(--c-primary);
box-shadow: 0 14px 30px -8px rgba(11,37,69,.18);
}
.krm-card-img {
height: 140px;
background-size: cover;
background-position: center;
background-color: #f1f5f9;
}
.krm-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.krm-card-loc {
font-size: 11px;
color: var(--c-muted);
margin-bottom: 4px;
letter-spacing: .3px;
text-transform: uppercase;
font-weight: 600;
}
.krm-card h4 {
font-size: 14px;
font-weight: 700;
color: var(--c-primary, #0b2545);
margin: 0 0 8px;
line-height: 1.4;
letter-spacing: -.2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.krm-card ul {
list-style: none; padding: 0; margin: 0 0 10px;
display: flex; gap: 6px; flex-wrap: wrap;
}
.krm-card ul li {
background: #f1f5f9;
padding: 3px 9px;
border-radius: 4px;
font-size: 11px;
color: #475569;
font-weight: 600;
}
.krm-card-price {
margin-top: auto;
font-size: 15px;
font-weight: 700;
color: var(--c-primary, #0b2545);
padding-top: 8px;
border-top: 1px solid #f1f5f9;
}
.krmodal-foot {
padding: 18px 30px;
border-top: 1px solid #f1f5f9;
text-align: center;
background: #fafbfc;
}
.krmodal-foot .btn { padding: 11px 24px; font-size: 13.5px; }
@media (max-width: 720px) {
.krmodal { padding: 12px; }
.krmodal-head { padding: 18px 20px; gap: 12px; }
.krm-icon { width: 44px; height: 44px; font-size: 18px; border-radius: 11px; }
.krmodal-head h3 { font-size: 17px; }
.krmodal-body { padding: 16px 20px; }
.krm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) and (min-width: 721px) {
.krm-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ─────────────────────────────────────────────
Krediye Uygun Mülkler — inline strip (modal değil)
───────────────────────────────────────────── */
.kru {
margin-top: 60px;
padding-top: 50px;
border-top: 1px solid #eef2f6;
opacity: 0;
transform: translateY(20px);
transition: opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.kru.kru-show { opacity: 1; transform: translateY(0); }
.kru-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
margin-bottom: 28px;
}
.kru-eyebrow {
display: block;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--c-accent, #d4a256);
margin-bottom: 6px;
}
.kru-title {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 600;
letter-spacing: -.6px;
color: var(--c-primary, #0b2545);
margin: 0 0 8px;
line-height: 1.15;
}
.kru-meta {
font-size: 14px;
color: var(--c-muted, #64748b);
margin: 0;
max-width: 600px;
}
.kru-meta strong { color: var(--c-primary, #0b2545); font-weight: 700; }
.kru-nav {
display: flex; align-items: center; gap: 8px;
}
.kru-arrow {
width: 38px; height: 38px;
border: 1.5px solid #e5e7eb;
background: #fff;
border-radius: 50%;
cursor: pointer;
color: var(--c-primary, #0b2545);
display: flex; align-items: center; justify-content: center;
transition: all .15s;
font-size: 13px;
}
.kru-arrow:hover:not(:disabled) {
border-color: var(--c-primary);
background: var(--c-primary);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 14px -4px rgba(11,37,69,.3);
}
.kru-arrow:disabled { opacity: .35; cursor: not-allowed; }
.kru-all-link {
margin-left: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--c-primary);
text-decoration: none;
padding: 9px 0;
border-bottom: 1px solid transparent;
transition: border-color .15s, color .15s;
}
.kru-all-link:hover { color: var(--c-accent); border-color: var(--c-accent); }
/* Strip — yatay kayan kartlar */
.kru-strip {
display: flex; gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 6px 2px 14px; /* shadow için pay */
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x mandatory;
}
.kru-strip::-webkit-scrollbar { display: none; }
.kru-loading, .kru-empty {
width: 100%;
text-align: center;
padding: 50px 20px;
color: var(--c-muted);
font-size: 14px;
}
.kru-loading i { font-size: 20px; color: var(--c-primary); margin-right: 8px; }
.kru-empty a { color: var(--c-primary); font-weight: 600; }
/* Kart */
.kru-card {
flex: 0 0 280px;
scroll-snap-align: start;
background: #fff;
border: 1px solid #eef2f6;
border-radius: 12px;
text-decoration: none;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .22s ease, box-shadow .22s ease, border-color .15s;
}
.kru-card:hover {
transform: translateY(-4px);
border-color: var(--c-primary);
box-shadow: 0 18px 38px -10px rgba(11,37,69,.2);
}
.kru-card-img {
height: 180px;
background-size: cover;
background-position: center;
background-color: #f1f5f9;
position: relative;
}
.kru-card-tag {
position: absolute;
top: 12px; left: 12px;
background: rgba(220,38,38,.95);
color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
}
.kru-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.kru-card-loc {
font-size: 11.5px;
color: var(--c-muted);
margin-bottom: 6px;
letter-spacing: .2px;
}
.kru-card-loc i {
color: var(--c-accent);
margin-right: 3px;
font-size: 10px;
}
.kru-card h4 {
font-size: 14.5px;
font-weight: 700;
color: var(--c-primary, #0b2545);
margin: 0 0 10px;
line-height: 1.4;
letter-spacing: -.2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kru-card-feat {
list-style: none; padding: 0; margin: 0 0 12px;
display: flex; gap: 6px; flex-wrap: wrap;
}
.kru-card-feat li {
background: #f1f5f9;
padding: 3px 9px;
border-radius: 4px;
font-size: 11px;
color: #475569;
font-weight: 600;
}
.kru-card-price {
margin-top: auto;
font-size: 16px;
font-weight: 700;
color: var(--c-primary, #0b2545);
padding-top: 12px;
border-top: 1px solid #f1f5f9;
letter-spacing: -.3px;
}
@media (max-width: 720px) {
.kru-title { font-size: 24px; }
.kru-card { flex: 0 0 240px; }
.kru-card-img { height: 150px; }
.kru-all-link { display: none; }
}
/* ─────────────────────────────────────────────
"Krediye uygun mülklere bak" CTA — sonuç panelinde
───────────────────────────────────────────── */
.kru-hint {
display: none;
width: 100%;
margin-top: 16px;
padding: 14px 16px;
background: linear-gradient(135deg, var(--c-primary, #0b2545) 0%, #13315c 100%);
color: #fff;
border: 0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
text-align: left;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .22s ease;
box-shadow: 0 8px 24px -8px rgba(11,37,69,.45);
}
.kru-hint.show { display: flex; animation: kruHintIn .35s ease both; }
@keyframes kruHintIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.kru-hint:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px -8px rgba(11,37,69,.55);
}
.kru-hint::before {
content: "";
position: absolute;
top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
animation: kruShimmer 2.5s infinite;
}
@keyframes kruShimmer {
0% { left: -100%; }
60%, 100% { left: 100%; }
}
.kru-hint-arrow {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--c-accent, #d4a256);
color: #1a1a1a;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
animation: kruBounce 1.6s ease-in-out infinite;
}
@keyframes kruBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.kru-hint-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.kru-hint-text strong {
font-size: 14px;
font-weight: 700;
letter-spacing: -.1px;
color: #fff;
}
.kru-hint-text small {
font-size: 11.5px;
color: rgba(255,255,255,.7);
margin-top: 3px;
font-weight: 500;
}
/* ─────────────────────────────────────────────
Favori — kalp + abone modal
───────────────────────────────────────────── */
.l-fav { cursor: pointer; transition: transform .15s; }
.l-fav:hover { transform: scale(1.1); }
.l-fav.is-fav {
color: #e11d48;
}
.l-fav.is-fav i { color: #e11d48; }
.l-fav i { transition: color .2s, transform .2s; }
@keyframes favPop {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
.l-fav.is-fav i { animation: favPop .35s ease; }
/* Modal */
.fav-modal {
position: fixed; inset: 0; z-index: 9999;
background: rgba(11, 37, 69, .82);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s ease, visibility 0s linear .22s;
}
.fav-modal.open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .22s ease, visibility 0s linear 0s;
}
.fav-modal[hidden] { display: none !important; }
.fav-modal-card {
position: relative;
background: #fff;
border-radius: 16px;
width: 100%; max-width: 460px;
padding: 36px 32px 30px;
box-shadow: 0 30px 80px -10px rgba(0,0,0,.5);
transform: translateY(20px) scale(.96);
transition: transform .25s cubic-bezier(.34,1.56,.64,1);
text-align: center;
}
.fav-modal.open .fav-modal-card { transform: translateY(0) scale(1); }
.fav-close {
position: absolute; top: 14px; right: 14px;
width: 34px; height: 34px;
background: #f1f5f9; border: 0;
border-radius: 50%;
font-size: 22px; line-height: 1;
color: #64748b;
cursor: pointer;
transition: all .15s;
padding: 0;
}
.fav-close:hover { background: #fef2f2; color: #dc2626; }
.fav-icon {
width: 60px; height: 60px;
margin: 0 auto 18px;
border-radius: 50%;
background: linear-gradient(135deg, #e11d48, #f43f5e);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
box-shadow: 0 8px 22px -4px rgba(225,29,72,.4);
animation: favBellRing 2s ease-in-out infinite;
}
@keyframes favBellRing {
0%, 100% { transform: rotate(0); }
10%, 30% { transform: rotate(-8deg); }
20%, 40% { transform: rotate(8deg); }
50% { transform: rotate(0); }
}
.fav-modal-card h3 {
font-family: 'Playfair Display', serif;
font-size: 24px;
font-weight: 600;
letter-spacing: -.4px;
color: #0b2545;
margin: 0 0 8px;
}
.fav-sub {
font-size: 13.5px;
color: #64748b;
line-height: 1.6;
margin: 0 0 24px;
}
.fav-field { text-align: left; margin-bottom: 16px; }
.fav-field label {
display: block;
font-size: 12px;
font-weight: 600;
color: #475569;
letter-spacing: .3px;
margin-bottom: 6px;
}
.fav-field input {
width: 100%;
padding: 13px 16px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font: inherit; font-size: 15px;
color: #0b2545;
outline: 0;
transition: border-color .15s, box-shadow .15s;
letter-spacing: .3px;
}
.fav-field input:focus {
border-color: #0b2545;
box-shadow: 0 0 0 3px rgba(11,37,69,.08);
}
.fav-kvkk {
display: flex; gap: 10px;
text-align: left;
font-size: 12.5px;
color: #475569;
line-height: 1.55;
margin-bottom: 18px;
cursor: pointer;
padding: 12px;
background: #fafbfc;
border: 1px solid #eef2f6;
border-radius: 8px;
}
.fav-kvkk input {
margin-top: 2px;
width: 16px; height: 16px;
accent-color: #0b2545;
flex-shrink: 0;
cursor: pointer;
}
.fav-kvkk a {
color: #0b2545;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.fav-kvkk strong { color: #0b2545; font-weight: 600; }
.fav-error {
background: rgba(220,38,38,.08);
border: 1px solid rgba(220,38,38,.25);
color: #b91c1c;
padding: 10px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
margin-bottom: 14px;
text-align: left;
}
.fav-submit {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #0b2545, #13315c);
color: #fff;
border: 0;
border-radius: 10px;
font: inherit;
font-size: 14px;
font-weight: 700;
letter-spacing: .3px;
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 8px 22px -8px rgba(11,37,69,.5);
transition: transform .15s, box-shadow .15s;
}
.fav-submit:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 12px 28px -8px rgba(11,37,69,.6);
}
.fav-submit:disabled { opacity: .7; cursor: wait; }
.fav-foot-note {
font-size: 11.5px;
color: #94a3b8;
margin: 14px 0 0;
}
.fav-foot-note strong { color: #475569; font-weight: 600; }
@media (max-width: 480px) {
.fav-modal-card { padding: 28px 22px 24px; }
.fav-modal-card h3 { font-size: 20px; }
.fav-icon { width: 52px; height: 52px; font-size: 19px; }
}
/* Hero — favori abone bildirimi */
.hero-fav-hint {
margin-top: 18px;
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.02));
border: 1px solid rgba(22,163,74,.2);
border-radius: 10px;
max-width: 480px;
animation: hfhFade .4s ease;
}
@keyframes hfhFade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.hfh-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: #16a34a;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
.hero-fav-hint strong {
display: block;
color: #15803d;
font-size: 13.5px;
font-weight: 700;
margin-bottom: 2px;
}
.hero-fav-hint small {
display: block;
color: #166534;
font-size: 12px;
line-height: 1.5;
}
.hero-fav-hint i.fa-heart {
color: #e11d48;
font-size: 11px;
}
/* ─────────────────────────────────────────────
Topbar — Favori abone chip
───────────────────────────────────────────── */
/* Topbar — Numaranız kayıtlı bildirimi (sade text) */
.tb-fav {
display: inline-flex; align-items: center; gap: 7px;
color: rgba(255, 255, 255, .82);
font-size: 12.5px;
letter-spacing: .2px;
}
.tb-fav i.fa-heart {
color: var(--c-accent, #d4a256);
font-size: 11px;
}
.tb-fav-mobile { display: none; }
@media (max-width: 600px) {
.tb-fav-text { display: none; } /* mobilde sadece yeşil nokta kalsın */
}
/* ─────────────────────────────────────────────
Captcha widget
───────────────────────────────────────────── */
.cap-row {
margin: 14px 0 12px;
}
.cap-label {
display: block;
font-size: 12.5px;
font-weight: 600;
color: var(--c-primary, #0b2545);
margin-bottom: 6px;
letter-spacing: -.1px;
}
.cap-wrap {
display: flex; align-items: center; gap: 8px;
}
.cap-img {
width: 160px; height: 50px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
display: block;
flex-shrink: 0;
cursor: pointer;
user-select: none;
transition: opacity .15s;
}
.cap-img:hover { opacity: .85; }
.cap-refresh {
flex-shrink: 0;
width: 38px; height: 38px;
border: 1.5px solid #e5e7eb;
background: #fff;
border-radius: 8px;
cursor: pointer;
color: var(--c-primary, #0b2545);
font-size: 13px;
display: flex; align-items: center; justify-content: center;
transition: all .18s ease;
}
.cap-refresh:hover {
border-color: var(--c-primary);
background: var(--c-primary);
color: #fff;
transform: rotate(180deg);
}
.cap-input {
flex: 1;
padding: 11px 14px;
border: 1.5px solid #e5e7eb;
border-radius: 8px;
font: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 4px;
text-align: center;
outline: 0;
transition: border-color .15s, box-shadow .15s;
}
.cap-input:focus {
border-color: var(--c-primary, #0b2545);
box-shadow: 0 0 0 3px rgba(11,37,69,.08);
}
@media (max-width: 480px) {
.cap-wrap { flex-wrap: wrap; }
.cap-input { flex: 1 0 100%; margin-top: 6px; }
}
/* Koyu zeminli formlar (anasayfa hızlı talep) için override */
.hf-form .cap-label { color: rgba(255,255,255,.85); }
.hf-form .cap-input {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.18);
color: #fff;
}
.hf-form .cap-input:focus {
border-color: var(--c-accent, #d4a256);
box-shadow: 0 0 0 3px rgba(212,162,86,.18);
}
.hf-form .cap-refresh {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.18);
color: #fff;
}
.hf-form .cap-refresh:hover {
background: var(--c-accent, #d4a256);
border-color: var(--c-accent, #d4a256);
color: #1a1a1a;
}
/* ─────────────────────────────────────────────
KVKK onay checkbox (form içinde)
───────────────────────────────────────────── */
.kvkk-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 12px 0;
padding: 12px 14px;
background: #fafbfc;
border: 1px solid #eef2f6;
border-radius: 8px;
cursor: pointer;
font-size: 12.5px;
line-height: 1.55;
color: #475569;
transition: border-color .15s, background .15s;
}
.kvkk-row:hover { border-color: #cbd5e1; background: #f4f9fc; }
.kvkk-row input[type="checkbox"] {
margin-top: 2px;
width: 16px; height: 16px;
flex-shrink: 0;
accent-color: var(--c-primary, #0b2545);
cursor: pointer;
}
.kvkk-row a {
color: var(--c-primary, #0b2545);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.kvkk-row a:hover { color: var(--c-accent, #d4a256); }
.kvkk-row strong {
color: var(--c-primary, #0b2545);
font-weight: 600;
}
.kvkk-row input:invalid + span,
.kvkk-row:has(input:invalid) {
/* Browser validation balonu için inline ipucu */
}
/* Koyu zeminli formlar (anasayfa hızlı talep) */
.hf-form .kvkk-row {
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.14);
color: rgba(255,255,255,.78);
}
.hf-form .kvkk-row:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.hf-form .kvkk-row a { color: var(--c-accent, #d4a256); }
.hf-form .kvkk-row a:hover { color: #fff; }
.hf-form .kvkk-row strong { color: #fff; }
/* Mülk Bul — wz-multi (çoklu seçim) görsel ipucu */
.wz-options.wz-multi .wz-opt {
position: relative;
}
.wz-options.wz-multi .wz-opt.active::after {
content: '\f00c'; /* check */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
top: 8px; right: 10px;
width: 18px; height: 18px;
background: var(--c-accent, #d4a256);
color: #1a1a1a;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
}
.wz-q label small {
font-weight: 400;
font-size: 12px;
color: var(--c-muted);
margin-left: 8px;
}
/* ─────────────────────────────────────────────
Mülk Bul — sonuç sayfası: CTA + yatay şerit
───────────────────────────────────────────── */
.wz-cta {
display: flex; align-items: center; gap: 22px;
background: linear-gradient(135deg, var(--c-primary, #0b2545), #13315c);
color: #fff;
padding: 22px 26px;
border-radius: 12px;
margin: 18px 0 30px;
box-shadow: 0 12px 30px -10px rgba(11,37,69,.5);
}
.wz-cta-text { flex: 1; min-width: 200px; }
.wz-cta-text strong {
display: block;
font-family: 'Playfair Display', serif;
font-size: 19px;
font-weight: 600;
margin-bottom: 4px;
letter-spacing: -.3px;
}
.wz-cta-text span {
display: block;
font-size: 13.5px;
color: rgba(255,255,255,.78);
line-height: 1.5;
}
.wz-cta-actions {
display: flex; gap: 10px; flex-shrink: 0;
}
.wz-cta-actions .btn {
padding: 11px 22px;
font-size: 13.5px;
font-weight: 700;
border-radius: 50px;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
}
.wz-cta-actions .btn-primary {
background: var(--c-accent, #d4a256);
color: #1a1a1a;
}
.wz-cta-actions .btn-primary:hover { background: #e8b96d; }
.wz-cta-actions .btn-outline {
background: transparent;
border: 1.5px solid rgba(255,255,255,.3);
color: #fff;
}
.wz-cta-actions .btn-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }
/* Sonuç başlığı + ok navigasyon */
.wz-results { margin-top: 10px; }
.wz-results-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px;
}
.wz-results-head h3 {
font-family: 'Playfair Display', serif;
font-size: 20px;
font-weight: 600;
letter-spacing: -.3px;
color: var(--c-primary, #0b2545);
margin: 0;
}
.wz-results-nav { display: flex; gap: 8px; }
.wz-arrow {
width: 38px; height: 38px;
border: 1.5px solid #e5e7eb;
background: #fff;
border-radius: 50%;
cursor: pointer;
color: var(--c-primary, #0b2545);
font-size: 12px;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.wz-arrow:hover {
border-color: var(--c-primary);
background: var(--c-primary);
color: #fff;
}
/* Yatay şerit */
.wz-strip {
display: flex; gap: 16px;
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 2px 12px;
}
.wz-strip::-webkit-scrollbar { display: none; }
/* Kart */
.wz-card {
flex: 0 0 280px;
scroll-snap-align: start;
background: #fff;
border: 1px solid #eef2f6;
border-radius: 12px;
text-decoration: none;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .22s ease, box-shadow .22s ease, border-color .15s;
}
.wz-card:hover {
transform: translateY(-4px);
border-color: var(--c-primary);
box-shadow: 0 18px 38px -10px rgba(11,37,69,.2);
}
.wz-card-img {
height: 170px;
background-size: cover;
background-position: center;
background-color: #f1f5f9;
position: relative;
}
.wz-tag {
position: absolute; top: 10px; left: 10px;
padding: 3px 10px;
border-radius: 4px;
font-size: 10.5px; font-weight: 700;
letter-spacing: .8px;
text-transform: uppercase;
}
.wz-tag-sale { background: rgba(220,38,38,.95); color: #fff; }
.wz-tag-rent { background: rgba(59,130,246,.95); color: #fff; }
.wz-card-match {
position: absolute; top: 10px; right: 10px;
padding: 3px 10px;
background: rgba(0,0,0,.65);
color: #fff;
border-radius: 4px;
font-size: 11px; font-weight: 700;
backdrop-filter: blur(4px);
}
.wz-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.wz-card-loc {
font-size: 11px;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: .3px;
font-weight: 600;
margin-bottom: 5px;
}
.wz-card h4 {
font-size: 14px;
font-weight: 700;
color: var(--c-primary, #0b2545);
margin: 0 0 10px;
line-height: 1.4;
letter-spacing: -.2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wz-card-feat {
list-style: none; padding: 0; margin: 0 0 10px;
display: flex; gap: 5px; flex-wrap: wrap;
}
.wz-card-feat li {
background: #f1f5f9;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
color: #475569;
font-weight: 600;
}
.wz-card-price {
margin-top: auto;
font-size: 16px;
font-weight: 700;
color: var(--c-primary, #0b2545);
padding-top: 10px;
border-top: 1px solid #f1f5f9;
}
.wz-card-price small {
font-size: 12px;
font-weight: 500;
color: var(--c-muted);
margin-left: 3px;
}
@media (max-width: 720px) {
.wz-cta { flex-direction: column; align-items: stretch; padding: 18px; gap: 14px; }
.wz-cta-text strong { font-size: 16px; }
.wz-cta-actions { flex-direction: column; }
.wz-cta-actions .btn { justify-content: center; }
.wz-card { flex: 0 0 240px; }
.wz-card-img { height: 140px; }
}
/* Yorumlar — profil resmi yok versiyon */
.t-meta-noimg {
justify-content: center;
text-align: center;
}
.t-meta-noimg > div { width: 100%; }
.t-meta-noimg .stars { justify-content: center; }
/* Footer credit — kodbizde.com imzası */
.footer-credit {
display: block;
margin-top: 4px;
font-size: 11.5px;
color: rgba(255,255,255,.5);
letter-spacing: .3px;
}
.footer-credit a {
color: var(--c-accent, #d4a256);
font-weight: 600;
text-decoration: none;
border-bottom: 1px dotted rgba(212,162,86,.4);
transition: color .15s, border-color .15s;
}
.footer-credit a:hover {
color: #fff;
border-color: #fff;
}
/* ─────────────────────────────────────────────
Bölgeler sayfası — minimalist, resimsiz, kurumsal
───────────────────────────────────────────── */
.bolgeler-section {
padding: 60px 0 80px;
background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.bs-head {
margin-bottom: 40px;
text-align: center;
}
.bs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.bs-card {
position: relative;
background: #fff;
border: 1px solid #eef2f6;
border-radius: 14px;
padding: 0;
text-decoration: none;
display: flex; flex-direction: column;
overflow: hidden;
transition: transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, border-color .15s;
animation: bsFade .45s ease both;
animation-delay: calc(var(--idx, 0) * 60ms);
}
@keyframes bsFade {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.bs-card:hover {
transform: translateY(-4px);
border-color: var(--c-primary, #0b2545);
box-shadow: 0 22px 50px -18px rgba(11,37,69,.32);
}
.bs-card::before {
content: "";
position: absolute; left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--c-accent, #d4a256), var(--c-primary, #0b2545));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.bs-card:hover::before { transform: scaleX(1); }
/* Üst başlık */
.bs-card-head {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 22px 8px;
}
.bs-num {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 600;
color: var(--c-accent, #d4a256);
letter-spacing: -1px;
line-height: 1;
}
.bs-arrow {
width: 32px; height: 32px;
border-radius: 50%;
background: #f1f5f9;
display: flex; align-items: center; justify-content: center;
color: var(--c-muted, #64748b);
font-size: 11px;
transition: all .25s ease;
}
.bs-card:hover .bs-arrow {
background: var(--c-primary, #0b2545);
color: #fff;
transform: rotate(45deg);
}
/* Body */
.bs-card-body { padding: 4px 22px 18px; flex: 1; }
.bs-card-body h3 {
font-family: 'Playfair Display', serif;
font-size: 24px;
font-weight: 600;
letter-spacing: -.6px;
color: var(--c-primary, #0b2545);
margin: 0 0 10px;
line-height: 1.15;
}
.bs-count {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px dashed #e5e7eb;
}
.bs-count strong {
font-size: 28px;
font-weight: 700;
color: var(--c-primary);
letter-spacing: -.6px;
display: inline-block;
margin-right: 6px;
}
.bs-count span {
font-size: 12.5px;
color: var(--c-muted);
letter-spacing: .3px;
text-transform: uppercase;
font-weight: 600;
}
.bs-stats {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 14px;
}
.bs-stat {
flex: 1 1 calc(50% - 4px);
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
background: #fafbfc;
border-radius: 8px;
font-size: 12.5px;
}
.bs-stat-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.bs-dot-sale { background: #dc2626; }
.bs-dot-rent { background: #3b82f6; }
.bs-stat-label { flex: 1; color: var(--c-muted); font-weight: 500; }
.bs-stat strong { color: var(--c-primary); font-weight: 700; }
.bs-prices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.bs-price {
background: linear-gradient(135deg, #fafbfc, #f4f9fc);
padding: 10px 12px;
border-radius: 8px;
border: 1px solid #eef2f6;
}
.bs-price small {
display: block;
font-size: 10.5px;
color: var(--c-muted);
text-transform: uppercase;
letter-spacing: .3px;
font-weight: 600;
margin-bottom: 3px;
}
.bs-price strong {
display: block;
font-size: 13px;
color: var(--c-primary);
font-weight: 700;
letter-spacing: -.2px;
}
.bs-card-foot {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 22px;
background: #fafbfc;
border-top: 1px solid #eef2f6;
font-size: 12px;
font-weight: 600;
color: var(--c-primary);
letter-spacing: .3px;
text-transform: uppercase;
transition: background .2s, color .2s;
}
.bs-card-foot i {
font-size: 11px;
transition: transform .25s;
}
.bs-card:hover .bs-card-foot {
background: var(--c-primary);
color: #fff;
}
.bs-card:hover .bs-card-foot i { transform: translateX(4px); }
@media (max-width: 600px) {
.bs-grid { grid-template-columns: 1fr; gap: 14px; }
.bs-num { font-size: 26px; }
.bs-card-body h3 { font-size: 20px; }
.bs-count strong { font-size: 24px; }
.bs-prices { grid-template-columns: 1fr; }
}
/* Mülk Bul — hero'dan wizard'a "aşağı kaydır" CTA */
.wz-scroll-cta {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding: 14px 26px;
background: rgba(255, 255, 255, .92);
color: var(--c-primary, #0b2545);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
letter-spacing: -.1px;
box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25);
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease, background .2s;
border: 1px solid rgba(255, 255, 255, .6);
}
.wz-scroll-cta:hover {
background: var(--c-primary, #0b2545);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 18px 38px -10px rgba(0, 0, 0, .35);
}
.wz-scroll-cta i {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--c-accent, #d4a256);
color: #1a1a1a;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
animation: wzBounce 1.6s ease-in-out infinite;
}
@keyframes wzBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.wz-scroll-cta:hover i {
background: #fff;
color: var(--c-primary);
}
@media (max-width: 600px) {
.wz-scroll-cta { font-size: 13px; padding: 12px 22px; }
.wz-scroll-cta i { width: 24px; height: 24px; font-size: 11px; }
}
/* ─────────────────────────────────────────────
Skeleton card — listing yüklenirken (anti-scrape gecikmeli yükleme)
───────────────────────────────────────────── */
.skel-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 8px;
overflow: hidden;
pointer-events: none;
}
.skel-img {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
background-size: 200% 100%;
animation: skelShimmer 1.4s ease-in-out infinite;
}
.skel-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.skel-line {
height: 12px;
background: linear-gradient(90deg, #f1f5f9, #e2e8f0, #f1f5f9);
background-size: 200% 100%;
animation: skelShimmer 1.4s ease-in-out infinite;
border-radius: 4px;
}
.skel-line.w70 { width: 70%; height: 16px; }
.skel-line.w90 { width: 90%; }
.skel-line.w50 { width: 50%; }
.skel-line.w40 { width: 40%; }
.skel-foot {
margin-top: auto;
padding-top: 10px;
border-top: 1px solid #f1f5f9;
}
@keyframes skelShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.lp-loading { opacity: .55; pointer-events: none; transition: opacity .25s ease; }
/* ─────────────────────────────────────────────
Güvenlik kontrolü loader (ilanlar yüklenirken)
Tema: lacivert (--c-primary) + şampanya altın (--c-accent)
───────────────────────────────────────────── */
.lp-secure-loader {
margin: 0 0 24px;
display: flex;
justify-content: center;
animation: lpLoaderIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.lp-secure-loader.is-hidden { display: none; }
.lp-secure-loader.is-fade { animation: lpLoaderOut .3s ease forwards; }
@keyframes lpLoaderIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lpLoaderOut { to { opacity: 0; transform: translateY(-4px); } }
.lp-secure-card {
width: 100%;
max-width: 580px;
position: relative;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 14px;
align-items: center;
padding: 18px 22px 16px;
border-radius: 12px;
background: #ffffff;
border: 1px solid var(--c-border);
box-shadow: 0 6px 24px -12px rgba(11,37,69,.12);
overflow: hidden;
}
.lp-secure-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--c-primary) 0%, var(--c-accent) 100%);
border-radius: 12px 0 0 12px;
}
.lp-sec-icon {
position: relative;
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(212,162,86,.14);
color: var(--c-primary);
flex-shrink: 0;
}
.lp-sec-icon svg { display: block; }
.lp-sec-icon .lp-check {
stroke: var(--c-accent);
stroke-dasharray: 36;
stroke-dashoffset: 36;
animation: lpCheck 1.8s ease-in-out infinite;
}
@keyframes lpCheck {
0% { stroke-dashoffset: 36; }
55% { stroke-dashoffset: 0; }
85% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
.lp-sec-icon .lp-pulse {
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid rgba(212,162,86,.45);
animation: lpPulse 1.8s ease-out infinite;
pointer-events: none;
}
@keyframes lpPulse {
0% { transform: scale(.7); opacity: .9; }
100% { transform: scale(1.3); opacity: 0; }
}
.lp-sec-text { min-width: 0; }
.lp-sec-text h3 {
margin: 0 0 3px;
font-size: 15px;
font-weight: 700;
color: var(--c-primary);
font-family: 'Playfair Display', serif;
letter-spacing: -.1px;
display: inline-flex; align-items: center; gap: 4px;
}
.lp-sec-text p {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--c-muted);
}
.lp-sec-text strong { color: var(--c-accent-2); font-weight: 600; }
.lp-sec-dots { display: inline-flex; gap: 3px; margin-left: 4px; }
.lp-sec-dots i {
width: 4px; height: 4px;
background: var(--c-accent); border-radius: 50%;
display: inline-block;
animation: lpDot 1.2s infinite ease-in-out both;
}
.lp-sec-dots i:nth-child(2) { animation-delay: .15s; }
.lp-sec-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lpDot {
0%, 80%, 100% { transform: scale(.4); opacity: .25; }
40% { transform: scale(1); opacity: 1; }
}
.lp-sec-bar {
grid-column: 1 / -1;
position: relative;
height: 3px;
border-radius: 99px;
background: #f3f4f7;
overflow: hidden;
}
.lp-sec-bar::after {
content: '';
position: absolute; top: 0; bottom: 0;
left: -35%;
width: 35%;
background: linear-gradient(90deg, transparent, var(--c-accent) 50%, transparent);
border-radius: 99px;
animation: lpBarSlide 1.3s cubic-bezier(.4,.0,.2,1) infinite;
}
@keyframes lpBarSlide {
0% { left: -35%; }
100% { left: 100%; }
}
@media (max-width: 600px) {
.lp-secure-card { padding: 14px 16px; column-gap: 12px; }
.lp-sec-icon { width: 42px; height: 42px; }
.lp-sec-icon svg { width: 22px; height: 22px; }
.lp-sec-text h3 { font-size: 14px; }
.lp-sec-text p { font-size: 12px; }
}
/* AJAX pagination (button bazlı) */
.pagination button {
width: 42px; height: 42px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--c-border);
font: inherit; font-weight: 600; font-size: 14px;
color: var(--c-text); cursor: pointer;
transition: all .15s ease;
}
.pagination button:hover {
border-color: var(--c-accent);
color: var(--c-accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px -4px rgba(0,0,0,.1);
}