/* Theme Name: MA Group Theme URI: https://ccrgermany.com/ Author: MA Group Description: Almanya'ya göç, Mavi Kart, şirket kuruluşu, gayrimenkul ve yatırım danışmanlığı için kurumsal tema. Version: 1.0 Text Domain: ccr-almanya */ :root{ --blue-900:#0b1f3a; --blue-800:#0f2d55; --blue-700:#123a6e; --blue-600:#1a4d8f; --blue-500:#2563b8; --blue-100:#e8f0fb; --gold-500:#c9a24b; --gold-600:#b3893a; --gray-900:#1b1f27; --gray-700:#4a5160; --gray-500:#7c8494; --gray-200:#e6e9ee; --gray-100:#f4f6f9; --white:#ffffff; --radius:14px; --shadow:0 10px 30px rgba(11,31,58,.08); --shadow-lg:0 20px 50px rgba(11,31,58,.14); --maxw:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:'Plus Jakarta Sans','Segoe UI',Tahoma,sans-serif; color:var(--gray-900); background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;font-weight:800} p{margin:0 0 1em} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} .section{padding:88px 0} .section-tight{padding:56px 0} .section-alt{background:var(--gray-100)} .eyebrow{ display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--gold-600);background:rgba(201,162,75,.12); padding:6px 14px;border-radius:999px;margin-bottom:16px; } .h2{font-size:clamp(28px,3.4vw,40px);color:var(--blue-900)} .lead{font-size:18px;color:var(--gray-700);max-width:680px} .center{text-align:center;margin-left:auto;margin-right:auto} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:999px; font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;transition:.2s; } .btn-primary{background:var(--gold-500);color:var(--blue-900)} .btn-primary:hover{background:var(--gold-600);transform:translateY(-1px)} .btn-outline{border-color:rgba(255,255,255,.5);color:#fff} .btn-outline:hover{background:rgba(255,255,255,.12)} .btn-outline-dark{border-color:var(--blue-700);color:var(--blue-700)} .btn-outline-dark:hover{background:var(--blue-100)} /* Header */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200)} .header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--blue-900)} .brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-700),var(--blue-500));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800} .brand-logo-img{height:48px;width:auto;border-radius:8px;display:block} .main-nav ul{display:flex;gap:28px;align-items:center} .main-nav a{font-weight:600;font-size:15px;color:var(--gray-700)} .main-nav a:hover{color:var(--blue-700)} .header-cta{display:flex;align-items:center;gap:16px} .header-phone{font-weight:700;color:var(--blue-800);font-size:14px} .menu-toggle{display:none} .lang-switch-group{display:inline-flex;align-items:center;gap:6px} .lang-switch{ display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:50%;border:1.5px solid var(--blue-700);color:var(--blue-700);font-weight:800; font-size:12px;letter-spacing:.02em; } .lang-switch:hover{background:var(--blue-100)} .lang-switch.active{background:var(--blue-700);color:#fff} /* --------------------------------------------------------------------- * RTL (Farsi) support * ------------------------------------------------------------------- */ body.lang-fa{ font-family:'Vazirmatn', Tahoma, Arial, sans-serif; direction:rtl; text-align:right; } /* header/nav/cta intentionally NOT reversed here — dir:rtl on already mirrors flex row layout automatically; adding row-reverse on top double-flips it back to LTR-looking order */ body.lang-fa .hero-grid, body.lang-fa .two-col{direction:rtl} body.lang-fa .hero-actions{flex-direction:row-reverse;justify-content:flex-end} body.lang-fa .hero-stats{flex-direction:row-reverse} body.lang-fa .breadcrumb{direction:rtl} body.lang-fa .cta-band{flex-direction:row-reverse} body.lang-fa .footer-bottom{flex-direction:row-reverse} body.lang-fa .office-card[style*="grid-template-columns:200px"]{direction:rtl} body.lang-fa .more{direction:rtl;display:inline-block} body.lang-fa a[href^="tel:"], body.lang-fa a[href^="mailto:"], body.lang-fa .office-body p{unicode-bidi:plaintext} /* Form notices */ .form-notice{padding:12px 16px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:18px} .form-notice-success{background:#e6f6ec;color:#1b7a41;border:1px solid #b9e6c9} .form-notice-error{background:#fdecec;color:#b3261e;border:1px solid #f6c6c3} /* Hero */ .hero{ position:relative;overflow:hidden;color:#fff; background:radial-gradient(1200px 600px at 80% -10%,rgba(201,162,75,.25),transparent 60%), linear-gradient(160deg,var(--blue-900),var(--blue-700) 60%,var(--blue-600)); padding:110px 0 90px; } .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .hero h1{font-size:clamp(34px,5vw,54px)} .hero p.lead{color:rgba(255,255,255,.85)} .hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap} .hero-stats{display:flex;gap:32px;margin-top:48px;flex-wrap:wrap} .hero-stat b{display:block;font-size:28px;color:var(--gold-500)} .hero-stat span{font-size:13px;color:rgba(255,255,255,.75)} .hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:28px;backdrop-filter:blur(6px)} .hero-card ul{display:grid;gap:16px} .hero-card li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:rgba(255,255,255,.92)} .hero-card .dot{width:22px;height:22px;border-radius:50%;background:var(--gold-500);color:var(--blue-900);flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800} /* Service cards */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:48px} .card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);transition:.2s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .card .icon{width:52px;height:52px;border-radius:12px;background:var(--blue-100);color:var(--blue-700);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px} .card h3{font-size:20px;color:var(--blue-900)} .card p{color:var(--gray-700);font-size:15px} .card a.more{font-weight:700;color:var(--blue-700);font-size:14px} /* Steps */ .steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px} .step{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:28px;padding-top:52px} .step:before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:28px;width:44px;height:44px;border-radius:12px;background:var(--blue-800);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px} .step h3{font-size:17px;color:var(--blue-900)} .step p{font-size:14.5px;color:var(--gray-700);margin:0} /* Benefits */ .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px} .benefit{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;text-align:center} .benefit .icon{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--gold-500);color:var(--blue-900);display:flex;align-items:center;justify-content:center;font-weight:800} .benefit h4{font-size:15px;margin-bottom:6px;color:var(--blue-900)} .benefit p{font-size:13.5px;color:var(--gray-700);margin:0} /* Case studies */ .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} .case-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px} .case-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .case-badge{background:var(--blue-100);color:var(--blue-700);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px} .case-date{font-size:12px;color:var(--gray-500)} .case-card ul{display:grid;gap:8px;font-size:13.5px;color:var(--gray-700)} .case-card li:before{content:"✓ ";color:var(--gold-600);font-weight:800} /* Offices */ .offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:48px} .office-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .office-map{height:180px;width:100%;border:0} .office-body{padding:22px} .office-body h3{font-size:18px;color:var(--blue-900)} .office-body p{font-size:14px;color:var(--gray-700);margin:4px 0} /* FAQ */ .faq-list{max-width:820px;margin:48px auto 0;display:grid;gap:14px} .faq-item{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden} .faq-item summary{padding:20px 24px;font-weight:700;color:var(--blue-900);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:after{content:"+";font-size:22px;color:var(--gold-600)} .faq-item[open] summary:after{content:"–"} .faq-item .faq-a{padding:0 24px 20px;color:var(--gray-700);font-size:15px} /* Table */ .table-wrap{overflow-x:auto;margin-top:32px} table.pricing{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} table.pricing th,table.pricing td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--gray-200);font-size:14.5px} table.pricing th{background:var(--blue-800);color:#fff;font-weight:700} table.pricing tr:last-child td{border-bottom:none} /* CTA band */ .cta-band{background:linear-gradient(135deg,var(--blue-800),var(--blue-600));color:#fff;border-radius:24px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap} .cta-band h2{color:#fff;margin-bottom:6px} .cta-band p{color:rgba(255,255,255,.8);margin:0} /* Form */ .consult-form{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)} .consult-form label{display:block;font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:6px} .consult-form input,.consult-form textarea,.consult-form select{ width:100%;padding:12px 14px;border:1px solid var(--gray-200);border-radius:10px; margin-bottom:18px;font-family:inherit;font-size:15px; } .consult-form button{width:100%} /* Footer */ .site-footer{background:var(--blue-900);color:rgba(255,255,255,.75);padding:64px 0 24px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px} .footer-grid h4{color:#fff;font-size:15px;margin-bottom:16px} .footer-grid a{display:block;padding:6px 0;font-size:14px;color:rgba(255,255,255,.7)} .footer-grid a:hover{color:var(--gold-500)} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:24px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:8px} /* Page hero (inner pages) */ .page-hero{background:linear-gradient(160deg,var(--blue-900),var(--blue-700));color:#fff;padding:70px 0} .page-hero h1{font-size:clamp(28px,4vw,42px)} .breadcrumb{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:16px} .breadcrumb a{color:rgba(255,255,255,.9)} .two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start} .sidebar-card{background:var(--gray-100);border-radius:var(--radius);padding:24px;position:sticky;top:100px} .sidebar-card h4{color:var(--blue-900);font-size:15px} .sidebar-card ul{display:grid;gap:10px;margin-top:12px} .sidebar-card a{font-size:14px;font-weight:600;color:var(--blue-700)} @media(max-width:960px){ .hero-grid,.two-col{grid-template-columns:1fr} .grid-3,.grid-2,.steps,.benefits,.cases,.offices,.footer-grid{grid-template-columns:repeat(2,1fr)} .main-nav{display:none} } @media(max-width:620px){ .grid-3,.grid-2,.steps,.benefits,.cases,.offices,.footer-grid{grid-template-columns:1fr} .cta-band{flex-direction:column;text-align:center} .section{padding:56px 0} } /* =========================================================== Scroll-scrubbed video hero =========================================================== */ .hero-video{ position:relative; height:100vh; min-height:560px; overflow:hidden; background:var(--blue-900); color:#fff; } .hero-video canvas.hero-canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; } .hero-video .hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.7) 100%); pointer-events:none; } .hero-video .hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px; } .hero-video .hero-content h1{ font-size:clamp(32px,5.4vw,64px); font-weight:800; line-height:1.14; max-width:900px; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); margin-bottom:18px; } .hero-video .hero-content .sub{ font-size:clamp(16px,1.6vw,20px); max-width:640px; color:rgba(255,255,255,.92); margin-bottom:32px; text-shadow:0 1px 12px rgba(0,0,0,.3); } .hero-video .hero-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; } .hero-video .scroll-hint{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .hero-video .scroll-hint .chevron{ width:18px;height:18px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); animation:ccr-scroll-bounce 1.8s ease-in-out infinite; } @keyframes ccr-scroll-bounce{ 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(5px,5px)} } /* Progressive enhancement: the tiny inline script in the hero markup adds .js-ready synchronously (no external script wait), which is what hides the text before GSAP fades it in. If JS is unavailable/blocked, the class never lands and the first chapter's text/CTA just stay visible as normal, static content instead of being stuck invisible. */ .hero-video.js-ready .hero-content h1, .hero-video.js-ready .hero-content .sub, .hero-video.js-ready .hero-cta, .hero-video.js-ready .scroll-hint{ opacity:0; } body.lang-fa .hero-video .hero-cta{flex-direction:row-reverse} /* Bridge strip right after the hero: crossfades from the sequence's actual ending color down to the site's normal light background, so there's no visible color "pop" the instant the pin releases. #13100d was sampled offline from the real last frame (assets/frames/frame_0361.webp, bottom band average) and blended with the scrim's own ~0.7 bottom opacity — re-sample if the frames are ever swapped for a different clip. */ .hero-bridge{ height:180px; background:linear-gradient(180deg, #13100d 0%, #f4f6f9 100%); } @media(max-width:620px){ .hero-bridge{height:90px} }