:root{
  --blue:#0c3e75;
  --blue2:#1b5794;
  --blue3:#2c6eae;
  --deep:#203b66;
  --text:#263e66;
  --muted:#6d7f9c;
  --orange:#efa70d;
  --orange2:#ffbd27;
  --soft:#f5f8fc;
  --line:#d7dfeb;
  --white:#fff;
  --shadow:0 7px 18px rgba(23,55,94,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#f2f6fb;
  color:var(--text);
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-size:16px;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
.container{width:min(100%,1024px);margin:0 auto;padding:0 25px}
.site-header{
  height:85px;color:white;background:
  linear-gradient(100deg,rgba(9,51,95,.98),rgba(21,76,132,.96)),
  url("assets/bg-kitchen.svg") center/cover;
  box-shadow:0 2px 7px rgba(0,0,0,.08);
}
.navbar{height:85px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:800;letter-spacing:-1px}
.brand .house{position:relative;width:49px;height:43px;background:white;border-radius:3px;color:var(--blue);display:grid;place-items:center;font-size:24px}
.brand .house:before{content:"";position:absolute;left:4px;right:4px;top:-12px;height:25px;border-left:3px solid white;border-top:3px solid white;transform:rotate(45deg);border-radius:2px}
.brand b{color:#ffc13a}
.navlinks{display:flex;align-items:center;height:100%}
.navlinks a{padding:31px 16px 26px;font-weight:700;font-size:14px}
.navlinks a.active,.navlinks a:hover{background:rgba(0,22,52,.20);border-bottom:2px solid rgba(255,255,255,.85)}
.nav-toggle{display:none;background:none;color:white;border:0;font-size:27px}

.hero{
  min-height:195px;text-align:center;padding:29px 20px 24px;
  background:
    linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.64)),
    url("assets/bg-kitchen.svg") center 43%/cover;
}
.hero h1{margin:0 0 11px;font-size:26px;line-height:1.25;color:#235080}
.hero-line{font-size:18px;margin-bottom:27px}
.orange{color:#e98411}
.hero-actions{display:flex;justify-content:center;gap:46px}
.btn{border:0;border-radius:6px;color:#fff;font-weight:800;cursor:pointer;box-shadow:0 5px 10px rgba(25,56,91,.17)}
.btn-lg{width:304px;padding:12px 22px;font-size:20px}
.btn-blue{background:linear-gradient(#1f5f9f,#10457e)}
.btn-orange{background:linear-gradient(#ffc337,#eda306)}
.btn-sm{padding:10px 21px}
.breadcrumb{height:46px;display:flex;align-items:center;font-size:14px;color:#637897}
.page-bg{
  background:
    linear-gradient(rgba(247,249,253,.92),rgba(247,249,253,.93)),
    url("assets/bg-kitchen.svg") center top/cover fixed;
}
.notice{
  margin:0 0 24px;border:1px solid #e7d2ac;background:linear-gradient(90deg,#fff7e9,#f8fbff);
  min-height:56px;display:flex;align-items:center;padding:10px 16px;gap:12px;border-radius:4px;
}
.notice .ico{font-size:26px;color:#e9a00b}
.page-title{font-size:31px;margin:22px 0 10px;color:#203d69}
.page-sub{font-size:20px;margin:0 0 20px}
.section{padding:20px 0}
.home-blue-strip{background:linear-gradient(#1c5d9a,#123e73);padding:15px 25px 13px}
.quick-grid{display:grid;grid-template-columns:1.1fr 1.25fr .9fr;gap:10px}
.quick{
  min-height:109px;background:white;display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid #d7dee7;
}
.quick-icon{font-size:46px;line-height:1;width:62px;text-align:center;filter:saturate(.8)}
.quick h3{font-size:18px;margin:0 0 7px;color:#164778}
.quick p{font-size:14px;font-style:italic;margin:0;color:#245082;font-weight:700}
.triple{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.home-box{background:white;border:1px solid #d8e0e9;box-shadow:var(--shadow)}
.box-title{background:linear-gradient(100deg,#153f73,#2866a4);color:white;font-size:18px;font-weight:800;padding:14px 18px}
.box-title.orange-title{background:linear-gradient(100deg,#e79d05,#ffbf26)}
.box-body{padding:9px 18px 11px}
.list-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #d7dfeb;font-size:14px;font-weight:700}
.list-item:last-child{border-bottom:0}
.li-icon{width:35px;text-align:center;font-size:25px}
.feature-scene-wrap{display:grid;grid-template-columns:2.1fr 1fr;gap:18px;margin-top:18px}
.scene{height:206px;background:url("assets/scene-people.svg") center/cover no-repeat;border:1px solid #dce3ec}
.welcome{
  min-height:325px;margin-top:14px;text-align:center;padding:36px 20px;
  background:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.78)),url("assets/bg-office.svg") center/cover;
  border-top:1px solid #d9e0e9
}
.welcome h2{font-size:28px;margin:8px 0 28px}
.welcome p{font-size:17px;font-style:italic;font-weight:700;margin:16px 0}
.footer{background:linear-gradient(#2d6aa8,#245a96);color:#fff;padding:26px 15px;text-align:center;font-size:16px}
.footer a{margin:0 10px}

.card{background:rgba(255,255,255,.94);border:1px solid #dbe2ec;box-shadow:var(--shadow)}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 0 24px}
.cat-card{min-height:250px}
.cat-top{padding:22px 20px 10px;display:flex;gap:15px}
.cat-top .bigico{font-size:56px;line-height:1}
.cat-top h3{font-size:21px;margin:2px 0 7px}
.cat-top p{margin:0;line-height:1.55;font-style:italic;font-size:14px}
.cat-stats{height:51px;background:linear-gradient(90deg,#1a5692,#286bae);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:14px}
.cat-stats b{font-size:17px}
.cat-last{padding:13px 18px;font-size:14px}

.login-area{background:rgba(255,255,255,.93);padding:30px 0 0}
.login-grid{display:grid;grid-template-columns:41% 59%;min-height:490px}
.login-col{padding:0 26px 28px}
.login-col:first-child{border-right:1px solid #dce3ec}
.big-heading{font-size:32px;margin:0 0 34px;text-align:center;color:#2b3f65;position:relative}
.big-heading:after{content:"";display:block;width:94%;height:1px;background:#d6dfeb;margin:9px auto 0}
.big-heading:before{content:"";position:absolute;bottom:-5px;left:50%;width:12px;height:12px;background:#7e9ab9;transform:rotate(45deg)}
.register-teaser{text-align:center;font-size:18px;margin:-16px 0 18px;font-weight:700;color:#325a88}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:8px}
.input-wrap{position:relative}
.input-wrap .inico{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:20px;color:#8092ad}
.input-wrap input,.input-wrap select,.input-wrap textarea{
  width:100%;border:1px solid #ccd6e5;background:white;padding:14px 15px 14px 45px;border-radius:5px;outline:none;color:#526784;
  box-shadow:0 4px 8px rgba(30,55,80,.04)
}
.input-wrap textarea{min-height:150px;padding:13px}
.check{display:flex;gap:10px;align-items:center;margin:14px 0}
.login-benefit{
  min-height:312px;background:linear-gradient(90deg,rgba(255,255,255,.96) 0 48%,rgba(255,255,255,.15) 78%),url("assets/scene-login.svg") center/cover;
  padding:26px 44px;font-size:25px;font-weight:800;line-height:1.9
}
.footer-scene{
  min-height:300px;background:linear-gradient(rgba(255,255,255,.70),rgba(255,255,255,.76)),url("assets/bg-office.svg") center/cover;
  text-align:center;padding:55px 20px
}

.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px}
.panel{background:rgba(255,255,255,.94);border:1px solid #dbe2ec;box-shadow:var(--shadow);padding:20px}
.panel h2,.panel h3{margin-top:0}
.tip-panel h3{font-size:19px}
.tip-row{padding:11px 0;border-bottom:1px solid #d7dfeb;display:flex;gap:10px;align-items:flex-start}
.tip-row:last-child{border-bottom:0}
.tick{color:#2670b3;font-weight:900}
.upload{
  height:96px;border:1px dashed #aac2dd;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:18px;background:#fbfdff
}
.file-big{font-size:40px;color:#93b5db}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-weight:700;margin-bottom:7px}
.form-row input,.form-row textarea,.form-row select{
  width:100%;padding:13px;border:1px solid #cbd6e7;border-radius:4px;background:#fff;color:#61738f
}
.form-row textarea{min-height:96px}
.dual-info{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:20px}
.mini-panel{background:white;border:1px solid #d9e0e9}
.mini-panel h3{background:#fff8ec;padding:13px 17px;margin:0;border-bottom:1px solid #e3d2b0}
.ethic{margin-top:20px;text-align:center;padding:26px;background:#fff;border:1px solid #dbe2ec}

.topic-panel h1{font-size:24px;margin:0 0 20px}
.authorline{display:flex;align-items:center;gap:12px;border-bottom:1px solid #d8e0eb;padding-bottom:16px}
.avatar{width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#e39b0d;color:#fff;font-size:27px;font-weight:800}
.tag{font-size:12px;background:#eef2f8;padding:5px 8px;border-radius:4px;color:#71819a}
.post-text{line-height:1.6;margin:18px 0}
.photo-placeholder{width:420px;height:190px;background:linear-gradient(#1f2630,#c3cad1);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;box-shadow:inset 0 0 0 10px #c8ced4;margin:15px 0}
.reply{display:flex;gap:12px;padding:17px 0;border-top:1px solid #dce3ec}
.reply p{margin:7px 0}
.side-title{font-size:20px;margin:0 -20px 10px;padding:0 20px 13px;border-bottom:1px solid #dce3ec}

.profile-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 215px;gap:0}
.profile-left{padding:28px 20px;text-align:center;background:rgba(255,255,255,.82);border-right:1px solid #dce3ec}
.profile-left .avatar{width:108px;height:108px;font-size:55px;margin:0 auto 18px}
.profile-left h2{font-size:22px}
.profile-stat{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.profile-main{background:rgba(255,255,255,.93);padding:0 22px 25px}
.profile-right{padding:65px 10px 0 12px;background:rgba(255,255,255,.83)}
.tabs{display:flex;border-bottom:1px solid #d9e1ec;overflow:auto}
.tab{border:0;background:transparent;padding:16px 14px;font-size:18px;color:#2b466d;white-space:nowrap;cursor:pointer}
.tab.active{border-bottom:4px solid #0b5aa5;font-weight:800}
.tab-panel{display:none;padding-top:24px}
.tab-panel.active{display:block}
.profile-main h2{font-size:24px;border-bottom:1px solid #dce3ec;padding-bottom:14px}
.profile-right .panel{padding:12px}
.stat{display:flex;justify-content:space-between;border-bottom:1px solid #dce3ec;padding:8px 0;font-size:13px}
.stat:last-child{border-bottom:0}
.activity{padding:12px;border:1px solid #dce3ec;margin-bottom:8px;background:#fbfcfe}
.notification{padding:14px 10px;border-bottom:1px solid #d9e1ec;display:flex;gap:12px}
.nicon{width:35px;height:35px;border-radius:50%;background:#4f87bd;color:#fff;display:grid;place-items:center}

.popular-head{display:flex;justify-content:space-between;align-items:center}
.filter-tabs{display:flex;background:#f5f7fb;border:1px solid #dbe2eb;margin:16px 0}
.filter-tabs button{border:0;background:transparent;padding:13px 20px;font-size:16px;color:#2b456d;cursor:pointer}
.filter-tabs button.active{border-bottom:3px solid #205a96;font-weight:800;background:#fff}
.pop-row{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:12px;padding:15px 18px;background:#fff;border:1px solid #dbe2eb;margin-bottom:11px}
.pop-ico{font-size:34px;color:#d8920b}
.pop-row h3{margin:0 0 8px;font-size:19px}
.pop-meta{font-size:13px;color:#7788a4}
.pop-side-blue{background:linear-gradient(#2b67a3,#245791);color:#fff;padding:18px;margin-top:16px}
.share-hero{
  min-height:270px;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.23)),url("assets/scene-laptop.svg") right center/cover no-repeat;
  padding:35px 32px
}
.share-hero h1{font-size:44px;margin:0 0 13px}
.share-hero p{font-size:23px;max-width:500px}
.share-layout{display:grid;grid-template-columns:minmax(0,1fr) 245px;gap:16px}
.share-card{background:#fff;border:1px solid #dbe2eb;padding:0 18px}
.share-card h3{font-size:19px;margin:14px 0 4px}
.share-card p{font-size:13px;color:#596d8d}

.rules{padding-bottom:30px}
.rules-intro{font-size:18px;line-height:1.55}
.rules-box{background:rgba(255,255,255,.88);border:1px solid #dbe2eb;padding:22px;margin-top:20px;position:relative;overflow:hidden}
.rule{display:grid;grid-template-columns:40px 1fr;gap:12px;margin-bottom:19px}
.rule .num{width:33px;height:33px;border-radius:50%;background:#e8a10c;color:#fff;display:grid;place-items:center;font-weight:800}
.rule h3{font-size:20px;margin:1px 0 7px}
.rule p{margin:0;line-height:1.45}
.rule-asides{position:absolute;right:16px;bottom:18px;width:330px}
.rule-note{padding:15px;border:1px solid #adc2db;background:#f3f7fc;margin-top:12px}
.rule-note.orange-note{background:#fff7e8;border-color:#e7c889}

@media(max-width:820px){
 .container{padding:0 14px}
 .site-header,.navbar{height:72px}
 .brand{font-size:21px}.brand .house{width:38px;height:34px;font-size:18px}
 .nav-toggle{display:block}
 .navlinks{display:none;position:absolute;top:72px;left:0;right:0;height:auto;background:#123f75;z-index:20;flex-direction:column;align-items:stretch}
 .navlinks.open{display:flex}.navlinks a{padding:14px 18px}
 .quick-grid,.triple,.cat-grid,.login-grid,.content-layout,.dual-info,.profile-layout,.share-layout,.feature-scene-wrap{grid-template-columns:1fr}
 .login-col:first-child{border-right:0;border-bottom:1px solid #dce3ec}
 .hero-actions{gap:12px}.btn-lg{width:auto;min-width:150px;font-size:16px}
 .profile-right{padding:10px}.profile-left{text-align:left}.profile-left .avatar{margin-left:0}
 .share-hero{background-position:center}.rule-asides{position:static;width:auto}
 .quick-grid{gap:8px}.quick{min-height:95px}.quick-icon{font-size:38px}
 .photo-placeholder{width:100%}
}

.article-wrap{padding:18px 0 36px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px}
.article-main{background:rgba(255,255,255,.97);border:1px solid #dbe2ec;box-shadow:var(--shadow);padding:26px}
.article-main h1{font-size:34px;line-height:1.18;margin:0 0 12px;color:#203d69}
.article-lead{font-size:19px;line-height:1.65;color:#3a557d;border-left:4px solid var(--orange);padding-left:16px;margin:20px 0 28px}
.article-main h2{font-size:23px;margin:31px 0 10px;color:#214c7d}
.article-main p{font-family:Georgia,"Times New Roman",serif;font-size:17px;line-height:1.83;color:#344a69;margin:0 0 15px}
.article-meta{font-size:13px;color:#7888a2;margin-bottom:20px}
.article-note{background:#f7fbff;border:1px solid #d7e4f0;padding:16px;margin:24px 0;font-size:15px;line-height:1.6}
.faq{margin-top:30px}
.faq-item{border-top:1px solid #dde4ed;padding:15px 0}
.faq-item h3{font-size:18px;margin:0 0 8px}
.related-link{display:block;padding:11px 0;border-bottom:1px solid #dbe2ec;font-weight:700;font-size:14px;color:#214d7e}
.related-link:hover{color:#d88905}
.list-item,.tip-row{cursor:pointer}
a.list-item:hover,a.tip-row:hover{background:#f7faff}
@media(max-width:820px){.article-layout{grid-template-columns:1fr}.article-main{padding:19px}.article-main h1{font-size:28px}}

.hero-phone {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;

    background: #d32f2f;
    color: #fff;
    padding: 10px 28px;
    border-radius: 7px;
    text-decoration: none;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    transition: all 0.2s ease;
}

/* 1. dışa yayılan kırmızı dalga */
.hero-phone::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: #d32f2f;
    z-index: -1;

    animation: heroPhonePulse 1.8s ease-out infinite;
}

/* 2. dalga - daha doğal ve sürekli görünmesi için */
.hero-phone::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    background: #d32f2f;
    z-index: -2;

    animation: heroPhonePulse 1.8s ease-out infinite;
    animation-delay: 0.9s;
}

@keyframes heroPhonePulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }

    70% {
        transform: scale(1.13, 1.35);
        opacity: 0;
    }

    100% {
        transform: scale(1.13, 1.35);
        opacity: 0;
    }
}

.hero-phone-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
}

.phone-icon {
    font-size: 23px;
}

.hero-phone-text {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

.hero-phone:hover {
    background: #b71c1c;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .hero-phone {
        padding: 9px 18px;
    }

    .hero-phone-number {
        font-size: 21px;
    }

    .phone-icon {
        font-size: 20px;
    }

    .hero-phone-text {
        font-size: 12px;
    }
}

.mobile-call-bar {
    display: none;
}

@media (max-width: 800px) {

    body {
        padding-bottom: 75px;
    }

    .mobile-call-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 75px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;

        background: linear-gradient(
            135deg,
            #c62828 0%,
            #d32f2f 55%,
            #b71c1c 100%
        );

        color: #fff;
        text-decoration: none;

        z-index: 99999;

        box-shadow:
            0 -4px 18px rgba(0, 0, 0, 0.22);

        -webkit-tap-highlight-color: transparent;
    }

    .call-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.15;
    }

    .call-info strong {
        color: #fff;
        font-size: 23px;
        font-weight: 800;
        letter-spacing: 0.3px;
    }

    .call-info small {
        color: rgba(255, 255, 255, 0.9);
        font-size: 11px;
        font-weight: 500;
        margin-top: 4px;
    }

    .call-wave {
        position: relative;

        width: 48px;
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #fff;
        color: #d32f2f;

        flex-shrink: 0;

        z-index: 1;
    }

    .call-icon {
        font-size: 25px;
        line-height: 1;

        animation: phoneShake 2.5s infinite;
    }

    /* 1. dalga */
    .call-wave::before,

    /* 2. dalga */
    .call-wave::after {
        content: "";

        position: absolute;

        left: 50%;
        top: 50%;

        width: 48px;
        height: 48px;

        border-radius: 50%;

        border: 2px solid rgba(255, 255, 255, 0.75);

        transform: translate(-50%, -50%) scale(1);

        opacity: 0;

        z-index: -1;

        animation: callRipple 2.2s infinite;
    }

    .call-wave::after {
        animation-delay: 1.1s;
    }

    @keyframes callRipple {

        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.7;
        }

        70% {
            opacity: 0.1;
        }

        100% {
            transform: translate(-50%, -50%) scale(1.9);
            opacity: 0;
        }
    }

    @keyframes phoneShake {

        0%,
        82%,
        100% {
            transform: rotate(0);
        }

        85% {
            transform: rotate(-10deg);
        }

        88% {
            transform: rotate(10deg);
        }

        91% {
            transform: rotate(-8deg);
        }

        94% {
            transform: rotate(8deg);
        }

        97% {
            transform: rotate(0);
        }
    }

    .mobile-call-bar:active {
        background: #a91717;
    }
}